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تكنولوجيا المعلومات والاتصالات 
مشروع 


تصميم مواقع الويب 


php rans ظ‎ 


r 


حقلت 


الصف الثاني الثانوي 
الفصل الدراسي الأول 


A۰1۷ 


تكنولوجيا المعلومات والاتصالات 
مشروع 
(تصميم مواقع الويب) 


الصف الثاني الثانوي 


الفصل الدراسي الأول 
إعداد 
د/ طاهر عبد الحميد العدلي أ/ أحمد عبد الله أحمد منصور 
خبير مناهج الكمبيوتر وتكنولوجيا المعلومات خبير الكمبيوتر وتكنولوجيا المعلومات 
مركز تطوير المناهج والمواد التعليمية إدارة تنمية مادة الكمبيوتر وتكنولوجيا المعلومات 
أ/ محمد يوسف الصادق يوسف أ/ أحمد الأنصاري السلاموني 
خبير الكمبيوتر وتكنولوجيا المعلومات خبير الكمبيوتر وتكنولوجيا المعلومات 


إدارة تنمية مادة الكمبيوتر وتكنولوجيا المعلومات إدارة تنمية مادة الكمبيوتر وتكنولوجيا المعلومات 


مراجعة تربوية 
د/ روجينا محمد حجازي 
خبير المناهج مركز تطوير المناهج والمواد التعليمية 
مراجعة علمية 
أ/ ماشاء الله محمد محمد 
مدير عام إدارة تنمية مادة الكمبيوتر وتكنولوجيا المعلومات 
أستاذ الحاسبات والمعلومات بجامعة عين شمس 
تصميم 
خبير الكمبيوتر وتكنولوجيا المعلومات 
إدارة تنمية مادة الكمبيوتر وتكنولوجيا المعلومات 


- 


1 ر 


ممهورية فصر الحلايية 
. 


ANSE 
ا ىن‎ 


مقدمة الكتاب 

يفرض التطور المستمر والسريع في مجال تكنولوجيا المعلومات والاتصالات» على العملية التعليمية 
متطلبات وأساليب متطورة لمواكبة تلك التطورات التكنولوجية المتلاحقة. 

وهو ما دفعنا إلى تبنى مداخل تعليمية جديدة تهدف إلى تحقيق الأهداف والفلسفة والرؤى التي 
تضمنتها وثيقة مادة الكمبيوتر وتكنولوجيا المعلومات تعكس معايير ومؤشرات المادة للصف الثاني 
الثانوي التي تم اعدادها في إطار مصفوفة من المدى والتتابع على المراحل والصفوف الدراسية 
المختلفة. 

ويهدف المنهج إلى تنمية مهارات التعلم الذاتي والإلكتروني والتعاوني ومهارات التفكير بأنواعه 
المختلفة من خلال تعاون الطلاب في تنفيذ مشروعات لتصميم وإنشاء موقع ويب تفاعلي (قاموس 
مصطلحات مصور). 

تعتمد فكرة المشروع على انشاء نموذج يحتذى به لبرنامج تصمم صفحاته باستخدام تطبيق 
Web)‏ 655100:م<اع)., ولغة الترمیز الا11!. ويضم قواعد بيانات يتم إنشائها باستخدام برنامج 
.MySQL‏ 

ويتم التعامل مع قواعد البيانات من خلال أكواد جاهزة تمت كتابتها بلغة برمجة )۶۳١۴۶(‏ مفتوحة 
المصدر 5010166 0861 يمكنك نسخها والاستعانة بها في إنشاء صفحات الموقع وفهم وتطوير أي 
كود ترغب في تنفيذه. 

كما يتضمن الكتاب صورًا من واجهات التطبيق فعلية منفذة للمشروع؛ لتوضيح جميع خطوات 
العمل» وتبسيط المفاهيم لدى المتعلمين» وذلك من خلال أنشطة وتدريبات عملية متضمنه في الكتاب 
المخصص لذلك. 

وأخيرًا فإن هذا الكتاب يحرص على تنمية مهارات التفكير المتنوعة والمهارات الحياتية والمهارات 
الخاصة باستخدام تكنولوجيا المعلومات والاتصالات لدى المتعلمين من خلال تنفيذهم مشاريع تتيح لهم 
فرصًا لتوظيف ما يقومون بدراسته في حياتهم العملية. 


(والله الموفق) 


الوحدة الأولي: أساسيات تصميم مواقع الويب 
الموضوع الأول: مدخل معرفي للمشروع 


الموضوع الثاني: تخطيط مشروع موقع "قاموس مصطلحات الكمبيوتر المصور" 


الوحدة الثانية: متطلبات ومراحل إنتاج المشروع 
الموضوع الأول: تصميم صفحات الموقع 


الموضوع الثاني: إنشاء قاعدة البيانات 


الوحدة الثالثة: إنشاء صفحات موقع 'قاموس مصطلحات الكمبيوتر المصور" 


الموضوع الأول: لغة  H1۲1‏ و۴۸1۴ وتطبيقات تصميم مواقع الويب 201 
الموضوع الثاني: المعاملات والجمل الشرطية في لغة P4۲‏ 


الموضوع الثالث: صفحة إدخال مصطلح |1م.00_7©11./ 


ات 


عكر 


مو ابه اف انه 


EA A 


أهداف كتاب تكنولوجيا المعلومات والاتصالات للصف الثاني الثانوي العام: 

> تعرف بعض العمليات والمفاهيم الخاصة بالبنية الأساسية لنظم الكمبيوترء وقواعد البيانات» 
ولغات برمجة انشاء صفحات ويبء وتأمين مواقع الويب» ءالخ 

> تعرف بعض المفاهيم والعمليات الأساسية الخاصة بخدمات وتطبيقات تكنولوجيا المعلومات 
والاتصالات. 

> فهم بعض جوانب الأمن الفكري (الإنسانية والأخلاقية والاجتماعية) وأمن المعلومات المتعلقة 
باستخدام تكنولوجيا المعلومات والاتصالات. 

> استخدام أدوات الإنتاج التكنولوجية (....-111/18:5112528:501]) في دعم وتطوير التعلم. 

> انتاج مشروع (قاموس مصطلحات الكمبيوتر المصور) باستخدام العمليات والبرامج والأدوات 
التكنولوجية. 

> توظيف أدوات الاتصال التكنولوجية في تبادل المحتوى والتواصل والتفاعل والتعاون مع الآخرين 
لدعم التعلم. 

> استخدام الأدوات والمصادر التكنولوجية في التعامل مع المعلومات والبيانات الإلكترونية ومعالجتها 


وتقييمها وإعداد تقارير بالنتائج. 


الوحدة الأولى 


الوحدة الأولى 


أساسيات تصميم مواقع الويب 


في نهاية الوحدة يتوقع أن يكون الطالب قادرًا على أن: 


يوضح بعض المفاهيم والمصطلحات العلمية المتقدمة ذات الصلة بالكمبيوتر. 


يوظف برامج الكمبيوتر في تنفيذ مهام التعلم. 


يوظف خدمات شبكة الإنترنت في عمليتي التعليم والتعلم. 


يمارس عمليات البحث عن المعلومات الإلكترونية بكافة صورها المتاحة على 


أجهزة الكمبيوتر وشبكات المعلومات الموثوقة في حل مشكلة. 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


سبق أن تناولنا في مقرر الكمبيوتر للصف الأول الثانوي» العديد من المعارف والمهارات 
المتنوعة من خلال إنتاج مشروع 'الأطلس العربي الإلكتروني"'» واستمرارًا لما بدأناه يمكنك إعداد 
المزيد من المشروعات المتنوعة في مختلف النواحي الدراسية والحياتية» وسوف نبحر معك في 
عالم افتراضي مفتوح يحقق المتعة والاستفادة والإبداع أثناء تصميمك وإنشاءك موقع ويب 'قاموس 
مصطلحات الكمبيوتر المصور" باستخدام تطبيقات ولغات برمجة مجانية مفتوحة المصدرء تعد 
الأكثر انتشارًا في كبرى الشركات والمؤسسات العالمية المتخصصة في مجال تكنولوجيا المعلومات 
والاتصالات. 


ويُعد مشروع إنتاج موقع 'قاموس مصطالحات الكمبيوتر المصور" بمثابة نموذج لقاموس 
مصطلحات عام تستطيع من خلاله إدخال كافة المصطلحات الخاصة بأي مادة دراسية» وبتيح 


لك المشروع امكانية البحث عن أي مصطلح وعرض المقصود به» وصورته بسرعة وسهولةء وذلك 


بالإضافة إلى إمكانية تعديله أو حذفه. 
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الوحدة الأولى 


في نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن: 


-١‏ يتعرف بعض المفاهيم والمصطلحات الأساسية المرتبطة بإنشاء موقع ويب يتعامل مع قواعد البيانات. 


"- يميز صفحة الويب الساكنة وصفحة الويب الديناميكية. 
۳- يمارس عمليات إعداد جهاز الكمبيوتر ليصبح جهاز .5©/11١©/‏ 


-٤‏ يتعرف حزم برامج وتطبيقات الويب. 
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الوحدة الأولى 
أساسيات تصميم موقع الويب 


أثناء تنفيذك مشروع "قاموس مصطلحات الكمبيوتر المصور" 
ينبغي أن تتعرف بعض المفاهيم الاساسية الهامة التي سوف 


:Freeware البرامج المجانية‎ -١ 
برامج يسمح مالكها اصاحب حق الملكية الفكرية" باستخدامها دون مقابل مادي أو إذن‎ 
:Open Source Programs البرامج مفتوحة المصدر‎ -3 
برامج وتطبيقات منشورة يُسمح لمستخدميها بالاطلاع على الكود وامكانية تعديله وتطويره‎ 
في ضوء احتياجات مطوريهاء وإعادة نشرها أو استخدامها بعد التعديل.‎ 
:Static Web Page صفحة الويب الساكنة‎ -۳ 
.صفحة معلومات تعرض من خلال أحد مستعرضات الإنترنت» يمكن حفظها بامتداد‎ 6 
.8101 ... تعرض مختلف أنواع البيانات من نصوص وأرقام وصور وفيديو وجداول وروابط‎ > 
إلخ» وقد يصاحب هذه البيانات بعض التأثيرات ولا يتاح من خلالها إجراء معالجة لمحتوى‎ 


وزارة التربية والتعليم 
الإدارة العامة للكمبيوتر التعليمي 


Static Web Page صفحة وبب ساكنة‎ )١١( شكل‎ 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


| 6-صفحة الويب الديناميكية :Dynamic Web Page‏ 
صفحة معلومات متاحة على الإنترنت» تكتب بلغة 5848 أو 458.164, يمكنها عرض 
مختلف أنواع البيانات» ويتاح من خلالها إجراء معالجة لمحتوى الصفحة:؛ كإرجاع قيمة أو عرض 

رسالة أو ناتج. 


وتحتوي صفحة الويب الديناميكية على كود يتم تنفيذه على جهاز الخادم 56٣۷۴۲‏ على سبيل المثال: 


© تنفيذ اجراء معين بناءًا على مدخلات العميل مثل اسم مستخدم وكلمة مرور. 
٠‏ احتواء الصفحة على كود للتعامل مع قاعدة بيانات عند الخادم. 


ويمكنك في بعض الأحيان معرفة نوع الصفحة (ساكنة أو ديناميكية) من الامتداد المتاح في 
عنوان الموقع U R1‏ 
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شكل (۲) صفحة وبب ديناميكية Dynamic web page‏ 
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( تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 


الوحدة الأولى 


أساسيات تصميم موقع الويب 


0- الخادم :Server‏ 
المصطلح يقصد به معنيين مختلفين» أحدهما باعتباره: جهاز كمبيوتر خادم 
Hardware Server‏ في شبكة كمبيوترء والأخير باعتباره مهمة أو دور يقوم به في 

.Software SerVer شبكة كمبيوتر‎ 


الأول: 

يقصد به جهاز كمبيوتر خادم Hardware Server‏ في شبكة كمبيوتر وهو جهاز يتميز 
بمواصفات فنية عالية عن باقي أجهزة الشبكةء يتحكم في باقي أجهزة الشبكة ومن خلاله 
تتحدد صلاحيات مستخدمي شبكة الكمبيوتر بواسطة نظام تشغيل ال /#عل/ااع5. 


يقصد به الدور الذي يقوم به جهاز الكمبيوتر في شبكة الكمبيوتر من خلال برمجيات 
Software‏ › فمثلا: 


خادم الوبب /56/06 ٥‏ ۷: يقصد به جهاز الكمبيوتر المخزن عليه صفحات موقع الودب. 


خادم الطابعة “561/6 "أ٣ :٥‏ يقصد به جهاز الكمبيوتر المتصلة به الطابعة» ويتحكم في إدارة عمليات 
الطباعة التي تصدر من أي جهاز آخر في الشبكة. 


خادم البريد الإلكتروني: /©/56/80 1311لا بقصد به جهاز الكمبيوتر المُخزن عليه رسائل البريد 
الإلكتروني وبتحكم في إدارة كافة العمليات المرتبطة بالبريد الإلكتروني واتاحتها لمس تخدمي البريد 
الإلكتروني. 


خادم قاعدة البيانات 5٥٠٠٠۴١:‏ 63430356 فهو جهاز الكمبيوتر المُخزن عليه قاعدة البيانات ويتحكم 
وددير عمليات التعامل مع البيانات 0 وهكذا. 


الوحدة الأولى 


"- سكريدت 4م3ك5: 
كود يكتب بإحدى لغات البرمجة المخصصة لصفحات الودب لإجراء مهمة أو معالجة على 
بعض البيانات منها: 


Server Side Languages Client Side Languages 


PHP Java Script 
ASP.net VB Script 
ينفذ هذا الكود: ينفذ هذا الكود:‎ 
داخل المستعرض بجهاز العميل داخل جهاز الخادم‎ 


."Run at Server' ."Run at Client’ 


ملاحظة: مثلاً 
> التأكد من عدم ترك حقل اسم المستخدم خالي يمكن تنفيذه عن طريق 
كود Java scrip‏ على جهاز العميل (Run at Client)‏ 


> أما كود التحقق من أن اسم المستخدم وكلمة المرور صحيحة وهي الموجودة في قاعدة 
البيانات بالخادم يتم تنفيذه عن طريق 
كود ٩۴‏ ۴ار ASP‏ على جهاز الخادم „(Run at Server)‏ 


:"Hyper Text Markup Language" HTML لغة الترميز أو التكويد‎ -۷ 


اللغة المستخدمة في إنشاء ©1236 طم“ عاأها8Sء‏ ويمكن حفظ هذه الصفحات بامتداد 


ا۳ط. ,tmط.‏ وتعرض من خلال أحد مستعرضات الإنترنت. 
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:"Personal Home Page" PHP لغة‎ -A 
إحدى اللغات المتخصصة في تطوير مواقع الويب الديناميكية» فهي لغة مجانية مفتوحة‎ 
المصدر تتسم بالسهولة والسرعة وتعمل لدى الخادم 210011366 !1 ©5100 5©170©1 ويتم تضمين‎ 
الكود الخاص بها داخل كود )1۲ء كما يمكنها الاتصال بسهولة بقواعد البيانات المختلفة‎ 

بأمان. 
وتُحفظ الصفحات التي تحتوي على كود 118 بامتداد 5115. ولتنفيذ الكود نحتاج لإجراء 
بعض التعديلات اللازمة لجعل جهاز الكمبيوتر الشخصي جهاز خادم 5617/61 باستخدام برنامج 
.Apache Server‏ 
وتحتاج أي لغة برمجة إلى برنامج مساعد يستخدم لكتابة الكود ومن أشهر برامج انشاء 
صفحات الوب بلغة 1۴ ۴: 


لكك 

Aptana Studio 3 

Aptana‏ ج 
Studio‏ 


MES 


Komodo Edit 


Komodo 
Edit 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


Expression 


2 web 


Microsoft 


Expressiorm Web 4 


THE FREE HTML EDITOR 


Coffee Cup Free 
HTML Editor 


Website Name 


شكل )"( بعض الت لتطبيقات المستخدمة في إنشاء صفحات ویب 


:Apache Server بر تامج‎ -8 


يستخدم مع أجهزة ال 561767 أو محاكاة جهازك الشخصي ليقوم بدور جهاز خادم 
۴ بحيث يستطيع ترجمة الكود المكتوب بلغة ۴۲۱۴ وهو ما يسهل على مطوري مواقع 
الويب من اختبار صفحات الموقع محليًا على جهاز الكمبيوتر ١06231‏ قبل رفعه على الجهاز 
المُمضيف 951!! ليتم نشره على الإنترنت. 
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الوحدة الأولى 


:Publishing Web Site فشر موقم ويب‎ -٠ 


أن يكون متاحًا لزيارته على الإنترنت» وتوجد طريقتان لنشر موقع: 


Localhost Îlah 


حيث يتم عرض الموقع على جهاز الكمبيوتر الخاص بنا أو في شبكة محلية ۸۸ا. 


الانترنت Publishing Web Site‏ 
حيث يرف ع لموققع على جهاز خسادم يسمى جهاز 
web 5116©‏ 11054100 أو الجهاز المُضيف حيث يسمح للمستخدمين بزيارة الموقع 
من خلال عنوان خاص بالموقع يطلق عليه Address Web‏ أو URL‏ 


Resource Locator"‏ 7 مثل عنوان موقع وزارة التربية والتعليم 


."www.emoe.org.eg' 


:"SQL "Structured Query Language لغة‎ -١ ١ 
لغة برمجة تستخدم في كافة عمليات إدارة قواعد البيانات بدءً من إنشاء قاعدة البيانات‎ 
والتعائل مع البيانات المخزئة ذاحل الارن الى سكون منها قواعة البيانات من خلال ككاية جمل‎ 

بسيطة (أوامر) تسمح بإجراء عمليات: 


>» إضافة بيانات جديدة (1815111). 


» استعراض بیانات مخزنة من قبل (120:1-ا58). 
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الوحدة الأولى 


-١ 


© تعديل هذه البيانات (0871هلا). 


» حذف هذه البيانات (08157). 


:MySQL Server 
081/5 هو أحد تطبيقات نظم إدارة قواعد البيانات ذات العلاقات‎ 


."Relational Data Base Management System" 


حزم تطبيقات الويب Web Server Packages"‏ ": 
تحتوي حزم تطبيقات الويب بشكل أساسي على: 
> تثبيت Install‏ خادم الوب .(Apache Server)‏ 
> تثبيت ااهاوہ! نظام لإدارة قواعد البيانات (-ا1/[/500). 
ويتوفر على الإنترنت حزم تطبيقات ويب مجانية يمكن تثبيتها منها على سبيل المثال: 
١-حزمة‏ تطبيقات الويب (Linux - Apache - MySQL - PHP) LAMP‏ 
تشمل برنامج خادم الويب S٠۷٠۲‏ ©8236©61, وتطبيق قاعدة البيانات ا 50 لاالااء 
ومترجم لغة البرمجة 81159 وتعمل على نظام التشغيل 0ا١!أا.‏ 
"-حزمة تطبيقات الويب (Windows - Apache - MySQL - PHP) WANP‏ 
تشمل برنامج خادم الوب 5©17©1 ©423©61, وتطبيق قاعدة البيانات ا 50 لاالااء 
ومترجم لغة البرمجة 1119 وتعمل على نظام التشغيل_1/1/1001/5. 
-٣‏ حزمة تطبيقات الويب (Mac - Apache -MySQL - PHP) MAMP‏ 
تشمل برنامج خادم الوب 5©17©1 ©48236©61, وتطبيق قاعدة البيانات 501 لاالااء 


ومترجم لغة البرمجة ۴١۴‏ وتعمل على نظام التشغيل_©1/3. 
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الوحدة الأولى 


"X-os, Apache, MySQL, PHP , Perl' (XAMPP) حزمة تطبيقات الويب‎ - ٤ 
©423©61؛ وتطبيق قاعدة البيانات ا 50 لاالااء‎ S٠۷٠۲ تشمل برنامج خادم الوبب‎ 


ومترجم لغة البرمجة 115 ولغة البرمجة !261 وتعمل على أي نظام تشغيل. 


الويب السابقة هو نظام التشغيل الذ 


ع -١‏ الجلسة :Session‏ 
طريقة لتخزين معلومات عن المستخدم (زائر موقع الوبب) وذلك بهدف إتاحتها للاستخدام 
عبر صفحات الموقع» مثل: (اسم المستخدم ٠م4۳‏ إهءلاء كلمة المرور »۴455W0۲١‏ بعض 
بياناته العامة والشخصية..... الخ). وقد يحتاج المستخدم إلى التسجيل عند زيارة موقع إنترنت 
بإدخال كلا من : User Name & Password)‏ ( ودتم ذلك بفتح Session‏ في الذاكرة يعمل 
الموقع لهذا المستخدم بزيارة جميع صفحات الموقع أو لا يسمح له»ء وذلك بناءًا على شرط/شروط 


9 الوحدة الأولى 


أساسيات تصميم موقع الويب 


وا التعم 
في نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن: 


-١‏ يحدد المهام المطلوبة لإنشاء موقع ويب. 


-"١‏ يخطط الصفحة الرئيسية لموقع ويب. 


"- يحمّل برنامج 81/1528( لتشغيل تطبيقي ©8261 و-5)01لاالاا. 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


تصميم وانشاء موقع 'قاموس مصطلحات الكمبيوتر المصور" باستخدام تطبيقات ولغات 
برمجية مجانية أو مفتوحة المصدر. 


تكمن أهمية المشروع في تدريبك على كتابة كود 21458 الخاص بالتعامل مع قواعد البيانات 
وبذلك يمكنك -عزيزي الطالب-اعتباره نموذجًا يمكنك تطبيقه في إنتاج مواقع جديدة متنوعة 


الاستخدامات بعد إجراءك التعديلات اللازمة. 


تحديد المهام المطلوب تنفيذها في مشروع إنشاء موقع 'قاموس مصطلحات 


الكمبيوتر المصور': 


> تهيئة البيئة المناسبة لإنشاء الموقع. 

> إنشاء قاعدة بيانات لحفظ بيانات قاموس المصطلحات التي يتم إدخالها أو تعديلها عبر 
صفحات الموقع. 

> تصميم الصفحة الرئيسة. 

> إضافة مصطح باللغتين العربية والإنجليزية -التعريف العلمي للمصطلح - صورة تدل 
على المصطلح» وحفظها في قاعدة بيانات. 

> البحث عن مصطلح داخل قاعدة البيانات. 

> حذف مصطلح من قاعدة البيانات. 

> تعديل بيانات مصطلح في قاعدة البيانات. 

# توفير المساعدة اللازمة حول كيفية التعامل مع الموقع. 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


| قاموس المصطلحات العصور [2] || + + م EJ http://localhost/dictionary/‏ | © 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


وذلك لضبط ما يلزم من تقنيات لضمان سلامة تشغيل الموقع؛ ومن هذه الإعدادات والتقنيات التي 
يجب وض في الاعتبار: 

)1( تحديد البرامج التي سوف تستخدمها في بناء مشروعك وتثبيتها !1151831 على الكمبيوتر. 

(؟) تحديد طريقة حفظ ملفات صفحات معلومات الويب 23665 ا۷۵ الخاصة 

بالمشروع على جهاز كمبيوتر 'خادم" 50۲۷۵۴ وامكانية عرضها على أحد برامج 

مستعرضات الإنترنت» وتحفظ هذه الصفحات في صورة ملفات على جهاز كمبيوتر 

'خادم" 5©17/©1: بإحدى الخيارات التالية: 


بمقابل مادي على الإنترنت من خلال حجز موقع على أحد أجهزة استضافة 
مواقع الويب See‏ 110514". 


نشر الموقع محليًا على جهازك "11051 1-0©31". وسوف نتبنى هذا الخيار 
في إنتاج مشروع 'قاموس مصطلحات الكمبيوتر المصور". 
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الوحدة الأولى 


يجب وضع جميع الملفات الخاصة بالموقع في مجلد واحد يحتوي على مجلدات فرعية تضم الملفات 
ذات النوع الواحد معاء وأن تكون أسماء الملفات مختصرة ومعبرة عن محتواها وباللغة الانجليزية. 


(۳) إعداد جهاز الكمبيوتر الخاص بك ليقوم بدور جهاز الخادم المضيف للموقع 
:"Local ١051"‏ 
عند إنشاء موقع ويب يحتاج مطوري البرامج إلى تهيئة البيئة المناسبة لإنشاء موقع إلكتروني 
'قاموس مصطلحات الكمبيوتر المصور" مما يستلزم جعل جهازك يعمل كجهاز خادم 5611©1) 
وذلك باستخدام برنامج 56۲۷8۲ 8030106 الذي يقوم بترجمة الكود المكتوب بلغة ۴1۴ 


."Personal Home Pages" 


* لتجربة الموقع والتأكد من صحته محليًا قبل نشره على الإنترنت 
أسوة بما تقوم به الشركات الكبرىء تحتاج إلى تهيئة جهازك ليقوم 
بدور جهاز الخادم ,©5610 ليصلح لاستضافة الموقع. 

من أمثلة البرامج المستخدمة لهذا الغرض برنامج "مه1/ا8)(" 
يعتبر برنامج 81/56 من أفضل برامج إعداد جهاز الكمبيوتر 
Hs"‏ ا0caا"»‏ فهو يتسم بالسهولة والقدرة على التعامل مع 
قواعد البيانات 50!1ئ!1/. 
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نشاط ) ۱( 
تثبيت برنامج ."XAMPP installing " XAMPP‏ 
اتبع خطوات تثبيت برنامج م8158 الموضحة في كتاب الأنشطة 
والتدريبات صفحة ٩‏ 


تخزن فيها البيانات التي يتم إدخالها أو عرضها على صفحات موقع الويب» وذلك 
من خلال إحدى برامج إدارة قواعد البيانات مثل: ا © 5ل9الا - 260655 .... إلخ. 


ع( مرحلة انشاء صفحة/موقع ويب ساكنة Static Web Pages‏ 


وذلك من خلال أحد الخيارين التاليين: 
لغة الترميز ."Hyper Text Markup Language" HTML‏ 
استخدام برنامج جاهز أو تطبيق AppIication‏ مثل برنامج: .Expression Web‏ 
لاحظ: 
الموقع الذي يتم إنشاؤه باستخدام تطبيق أو لغة 1101 يحتوي على صفحات 
ويب ساكنة "123065 Web‏ 51311" تضم صورًا مختلفة من البيانات والمعلومات. 
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الوحدة الأولى 


(۳) مرحلة تحويل صفحة الويب الساكنة إلى صفحة ويب ديناميكية 


:"Dynamic Web Pages" 


يتم فيها معالجة محتويات صفحة الويب الساكنة والتعديل في قاعدة البيانات المرتبطة بها 


بواسطة المستخدم المسموح له بالمعالجة والتعديل» وذلك من خلال كتابة كود بإحدى لغات البرمجة 
متثل :۴۴۸۳۴ داخل كود HTML‏ . 


يتم عرض صفحات الموقع باستخدام أحد مستعرضات الإنترنت التالية: 


Internet Explorer - Google Chrome - Firefox‏ ...إلخ. 


نشاط (۲) 


"تشغيل برنامج M۲۲‏ ۸×" 
تحت إشراف معلمك 
اتبع الخطوات الموضحة في كتاب الأنشطة والتدريبات 
صفحة ١7‏ لتشغيل برنامج XAP‏ 
بالطريقة الصحيحة 
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الوحدة الأولى 


سے 


ا 


لإنشاء مشروعنا موقع "قاموس مصطلحات الكمبيوتر المصور" 


علينا ما يلي: 
-١‏ إنشاء صفحات ساكنة "223665 513116" من خلال تطبيق 
حيث يمكن من خلاله عرض كود "111/11" مثل ."Expression Web"‏ 
؟- معالجة محتويات الصفحات الساكنة "1ع/الا 513116" لتصبح صفحات الموقع 1131131ل/إ1]0» 
وذلك بإضافة كود بلغة "8485" داخل كود "11م8471". 
۳- تشغيل برنامج 74/11/1928 الذي يقوم بالآتي: 
8 تشغيل برنامج ©8361 والذي يجعل الجهاز يقوم بدور الخادم 11/6 ©5. 
8 تشغيل برنامج ا۱۷5 والذي يمكن من التعامل مع قواعد البيانات. 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


في نهاية الوحدة يتوقع أن يكون الطالب قادرًا على أن: 


-١‏ يقترح مشروعات بسيطة لتوظيف تطبيقات وخدمات تكنولوجيا المعلومات والاتصالات 
في المجالات الحياتية والدراسية. 

"- يوظف تطبيقات تكنولوجيا المعلومات والاتصالات في تبادل مهام المشروعات. 

"- يوظف بعض البرامج والتطبيقات المكتبية (جداول حسابية -قواعد البيانات) في إنتاج مهام 
محددة ضمن مشروعات تعليمية. 

4- يوظف عدة برامج لحل المشكلات التعليمية والحياتية. 

5- يصمم قاعدة بيانات مناسبة لمشروعه. 

1- يمارس مهارات البرمجة بلغة 1۲ ۴. 

۷- يستخدم بعض تطبيقات الإنترنت في تنفيذ مشروعه. 

۸- يصمم صفحات ويب تفاعلية خاصة بمشروعه. 

أن يريظ صقهات الريب افا ية بق اعد اأبيقات 

-٠‏ ينتج مشروع باستخدام تطبيقات الإنترنت المتقدمة. 

-١‏ يوظف قواعد البيانات المتقدمة (1 ©1]/1[9/5) في تصميم مواقع لحل مشكلة حياتية. 

-١‏ يستخدم لغة البرمجة 1485 في إنتاج برمجيات وموقع ويب للتعبير عن أفكاره. 

-١‏ يقيّم مواقع ومصادر المعلومات من حيث الدقة والمصداقية في ضوء معايير محددة. 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


يمر مشروع إنتاج "قاموس مصطلحات الكمبيوتر المصور" بعدة 
مراحل أساسية هي: 


| مرحلة )١(‏ | 
تصميم صفحات الموقع 


مرحلة (۲) | 
مرحلة إنشاء جداول قاعدة البيانات 


| )۳( مرحلة‎ 
SE aT 


وكل مرحلة تتضمن عدة مهارات ومن خلال دراستك لها وتدريبك عليها يمكنك تنفيذ المشروع 


| | 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


واج التعم 
في نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن: 


-١‏ يصمم مكونات الصفحة الرئيسة لصفحات موقع قاموس المصطلحات. 


"- يحدد الروابط اللازمة للإبحار بين صفحات الموقع. 


۳- يناقش مع زملاءه عدة مقترحات لتصميم صفحات المشروع. 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


مرحلة تصميم صفحات الموقع | 


هي المرحلة الأولى من مراحل تنفيذ المشروع» وفيها يتم تحديد صفحات الويب 
الخاصة بالمشروع» واسم كل منهاء والغرض منهاء ومحتواهاء ووضع تصور لتصميم 
مكونات الصفحة الرئيسة للموقع. والارتباطات التشعبية 11015؛06لا1! التي 
نستخدمها في التنقل بين صفحات الموقع والعودة مرة أخرى للصفحة الرئيسة. 

التصميم الجيد للموقع قبل البدء في إنشائه يوفر الوقت والجهد ويساعد على 
إنتاج موقع بشكل متميز واحترافي. ْ 

والشكل التالي يوضح تصور مقترح لتصميم صفحات موقع "قاموس مصطلحات الكمبيوتر 
المصور": 


صفحة إدخال مصطلح 


Add_Term.php 


الصفحة الرئيسة 
Index.php‏ 


ر 6س 
صفحة تعديل مصطلح | صفحة البحث بالكلمة | 
Search_Term.php Edit_Term.php‏ 
ه5) مخطط لصفحات موق قاموس 'مصطلحات الكمبيوتر المصور" | 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


منهاء ووصفها: 


Index.php 


صفحة الاتصال بقاعد 


البيانات 


Connection.php 


صفحة رأس صفحات 


الموقع 
Header.php‏ 


Add_Term.php 


مصطلح 


Search_Term.php 


تفعيل الارتباطات 
التي يمكن من 
خلالها الانتقال بين 
صفحات الموقع. 


تحقيق الاتصال 
بقاعدة البيانات» 
حيث يتم استدعائها 
قبل التعامل مع 
البيانات. 

إظهار الصورة 
Banner‏ 

والارتباطات 
Hyperlinks‏ التي 
الموقع حيث يتم 
استدعائها في بداية 


تمثل صفحة البداية التي تظهر 
للمستخدم عند تحميل الموقع» والتي 
من خلالها يمكن الانتقال إلى باقي 
صفحات الموقع. 


لا تظهر هذه الصفحة أمام المستخدم 
وإنما تم فصلها لكي نكتفي بسطر كود 
واحد يحقق الاتصال بقاعدة البيانات 
في بداية كل صفحة بدلا من تكرار كود 
الاتصال بقاعدة البيانات بالكامل. 

هذه الصفحة تحتوي على الأجزاء 
الثابتة التي نحتاج لعرضها في جميع 
صفحات الموقع. لذا تم فصلها في 
صفحة مستقلة» ويتم استدعائها من 
خلال كتابة سطر كود واحد في بداية 
كل صفحة. 


صفحة مستقلة يكتب بها كود لاستدعاء 
صفحة م م.rمeadہ‏ وکود آخر 
لاستدعاء صفحة connection.php‏ 
حتى يمكن إضافة سجل جديد لقاعدة 
البيانات 

صفحة مستقلة يكتب بها كود لاستدعاء 
صفحة مnام.rمhead‏ وکود آخر 
لاستدعاء صفحة connection.php‏ 


حتى يمكن البحث عن مصطلح في 
قاعدة البيانات. 


کود ۴۳4۴ 
للاتصال بقاعدة البيانات. 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


صفحة تعديل مصطلح عند إجراء تعديل بيانات مصطلح نختار 
Edit_Term.php‏ المصطح المراد تعديلهء ثم إجراء ما 
يلزم من تعديل وحفظها. 


صفحة حذف مصطلح يمكن حذف المصطلح الذي تم اختياره. 
Del_Term.php‏ 


صفحة المساعدة عادة ما نجد في معظم المواقع صفحة 
Help.php‏ 5لا 850104 يعرض فيها معلومات عن 
الجهة التي يتبعها الموقع وطرائق 
التواصل مثل أرقام الهواتف والعنوان 
والبريد الإلكتروني والعنوان على مواقع 

التواصل الاجتماعي... إلخ. 


لاحظ: لتجنب كتابة كود في جميع صفحات الموقع يتم الآتي: 
١.فصل‏ الصورة 83171161 والارتباطات التشعبية 6111915لا1! في صفحة مستقلة يتم استدعائها في 
بداية كل صفحة. 

؟.فصل كود الاتصال بقاعدة البيانات في صفحة مستقلة يتم استدعائها في بداية كل صفحة. 

۳.الصورة التي تظهر في بداية كل صفحة وتسمى 52311761 

4 .جميع الارتباطات التشعبية 0611115لا1!! التي نستخدمها في الإبحار بين صفحات الموقع وهي: 

(الرئيسة - إدخال مصطلح - بحث عن مصطلح - تعديل -حذف - مساعدة)» 
وهذا يتطلب تكرار الكود الخاص بالصوةة والارتباطات في جميع صفحات الموقع وهو ما يمثل 

عبء كبير وتكرار ينبغي أن نتجنبه. وذلك بفصلها في صفحة واحدة يتم استدعائها في باقي الصفحات. 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


وهناك العديد من التطبيقات أو البرامج الجاهزة التي يمكن من خلالها إنشاء صفحات الويب 
الخاصة بالمشروع بسرعة وسهولة» وهو ما سوف نقوم بتنفيذه في المراحل التالية. 

بعد تحديد صفحات الموقعء علينا تحديد الهيكل البنائي لقاعدة البيانات» وهو ما سيتم توضيحه 
في المرحلة الثانية للمشروع (الموضوع التالي). 


المصور" 


بكتاب الأنشطة والتدريبات صفحة ٠١‏ 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


الموضوع الثاني 


إنشاء قاعدة البيانات 


واج العمل 
في نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن: 
-١‏ يتعرف بعض المفاهيم الأساسية المتعلقة بقواعد البيانات. 
- ينشئ قاعدة بيانات لمشروع" قاموس مصطلحات الكمبيوتر المصور". 
۳- يمارس عمليات الربط بقواعد البيانات. 
؛- يصنف العلاقات في قواعد البيانات. 


- يتعاون مع زملائه في انشاء جداول قاعدة بيانات. 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


مرحلة 


إنشاء جداول قاعدة البيانات 


المرحلة الثانية في المشروع هي مرحلة إنشاء قاعدة بيانات مشروع 'قاموس مصطلحات الكمبيوتر 
المصور" وقبل البدء لابد من التعرف على بعض المفاهيم الأساسية الخاصة بقواعد البيانات. 
-١‏ قاعدة البيانات :Database‏ 
قاعدة البيانات عبارة عن تخزين أو حفظ مجموعة من البيانات المنظمة والمرتبطة بموضوع معين 
بغرض استرجاعها لاتخاذ القرارات. وتعتبر قاعدة البيانات ذات العلاقات Relational Database‏ 
أحد أنواع قواعد البيانات التي تعتمد على تقسيم البيانات في جداول 130165 مع تحديد العلاقات بين 
هذه الجداول. 


:Tables الجداول‎ -١ 


يمثل الجدول البنية الأساسية أو المكون الأساسي لقاعدة البيانات» ويتكون من سجلات 
5 ؛؛ وحقول 16105 مثل: جدول بيانات: الطالب أو الموظف أو المنتج...إلخ. 


| 
حقول ع۴ | 
5 | 

ْ (أعمدة وموناه©) ْ 1 59 


5 


اس 


شكل (1) مثال لجدول طالب 


| تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ۳ ۳۳ 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


من الجدول السابق نستنتج المفاهيم التالية: 
أ-السجلات :Records‏ 
صف من جدول البيانات يتضمن جميع البيانات الخاصة بشخص واحد فقط أو حالة واحدة» ويتكون 
السجل من عدة حقول كسجل بيانات (طالب أو موظف أو منتج معين). 
ب-الحقول 216105: 
الحقل هو البنية الأساسية التي يتكون منها جدول البيانات» أي عمود في جدول يمثل حقل» ويحتوي 
الحقل على بيان واحد فقط لكل سجل من سجلات الجدول. 
لكل حقل العديد من الخصائص منها: 
> اسم الحقل 1131036 1610!: مثل اسم الطالب» اسم المحافظة, المرتبء الكمية ...إلخ. 
ج نوع بيانات الحقل عملا1 2243 1610!: قد يكون: 
> نصي5111110: مثل الاسم أو العنوان. 
> رقمي 16116الالاا: مثل درجة أو راتب موظف. 
> تاريخ ©1316: مثل حقل تاريخ الميلاد وهكذا. 
> حجم الحقل: :Field Size‏ 
وهو عدد الخانات أو الأحرف في حالة الحفل النصيء أو تحديد نوع الأرقام المدخلة في 
حالة الحفل الرقمي (صحيح 1606/7 - يحتوي على كسر عشري اه" أءم0 - 


والجدير بالذكر أنه: 


> يمكن إنشاء قاعدة بيانات تتكون من جدول واحد فقط يتضمن جميع الحقول اللازمة 
وفي هذه الحالة يسمى هذا الجدول "13516 ھا۴'. 

> عادة ما نقوم بفصل الحقول التي يجمعها عامل مشترك وتجميعها في جدول واحدء 
وبالتالي تحتوي قاعدة البيانات على أكثر من جدول. 

> وهو الأمر الذي يتطلب إنشاء علاقات تربط جداول قاعدة البيانات ببعضهاء وذلك 
لتجنب تكرار البيانات أو الحقول» ويطلق على قاعدة البيانات في هذه الحالة قاعدة 
بيانات ذات العلاقات .Relational Database‏ 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


ولضمان نجاح عملية الربط بين جداول قاعدة البيانات» فلابد من تحقيق الآتى: 


تعيين حقل مفتاح أساسي"'لا©»! 7111031" لكل جدولء وذلك بإحدى الطريقتين التاليتين: 
« اختيار أحد حقول الجدول: شرط ألا يتكرر أي بيان في هذا الحقل على الإطلاق» حتى مع حجم 
ضخم من البيانات. 


أو 
« بإضافة حقل جديد: يتم تعينه أو تخصيصه حقل مفتاح أساسي .Primary Key‏ 


"المفاهيم الأساسية لقواعد البيانات 


بكتاب الأنشطة والتدريبات صفحة ۲١‏ 


ادرس الجدول التالي وناقش مع زملائك ومعلمك ما توصلت إليه. 


اسم الطالب | نوع الطالب المحافظة تاريخ الميلاد التليفون 
محمد ذكر القاهرة ۲۰۰۰/۱/۱ 4۸ 
سما ت الجيزة °/1444/۲ ANVAAY‏ 
فاطمة اتی القاهرة ل rrr‏ 
يوسف ذكر الجيزة 1/1۱ oot‏ 
هبه أنثى الشرقية ۱۹4۸/۷/٦‏ 11 


ومنه يتضح أن الحقول التي يمكن تكرار بياناتها لا تصلح أن تكون حقل مفتاح أساسيء لذا يجب 
إضافة حقل جديد ليصبح حقل مفتاح أساسي للجدول» وليكن رقم الطالب أو كود الطالب بحيث 
يخصص لكل طالب رقم خاص به يميز بياناته عن باقي سجلات الجدول. 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


تحديد أنواع العلاقات 1613610751105 في قواعد البيانات» ومفهوم كل نوع وكيف يمكن الربط 
بين جدولين» وهو ما سيتم تناوله بشيء من التفصيل. 


أنواع العلاقات في قواعد البيانات 


النوع الأول النوع الثاني النوع الثالث 


علاقة رأس برأس علاقة رأس بأطراف علاقة أطراف بأطراف 
Many to Many One to Many One to One‏ 


النوع الأول: علاقة رأس برأس 0e‏ 0+ عم0: 
علاقة تربط بين جدولين» حيث يمكن أن يرتبط سجل في الجدول الأول ببسجل واحد فقط من 
الممرق الذافي وای د 


مثال )١(‏ 
جدول 'بيانات الطالب' جدول 'حالة الطالب' 

رقم الاسم | تاريخ الميلاد | الجنسية | العنوان | التليفون رقم الصف العام الحالة 

الطالب الطالب | الدراسي | الدراسي | الدراسية 
١‏ هاني | ٠٠٠٠/١/١‏ | مصري | القاهرة | ١١١١١‏ ۳ ۱/۲ 5 | منقول 
۲ أمل 0/5 | مصرية | الجيزة | 455ه ٤‏ ۳/۲ 5 | منقول 
۳ وليد ۳ | مصري قنا | ١ ٩۹۹۸۷۷‏ بذاك 5 | منقول 
سمر ٤‏ | مصرية | أسوان | ۲۰٦ 1/۲ ۲ ٥١٥۸۸٩۹‏ باقي 


شكل (7) يوضح العلاقة رأس برأس بين جدولين 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


من شكل (۷) نلاحظ: 
أن الربط بين جدولين بعلاقة رأس برأس تتم بربط حقل المفتاح الأساسي في الجدول الأول 'رقم 
الطالب" مع حقل المفتاح الأساسي في الجدول الثاني 'رقم الطالب"؛ مع مراعاة أن حقلي المفتاح 
الأساسي في الجدولين لابد أن يكونا: 
)١(‏ من نفس نوع البيانات ©6ملا1 .Field Data‏ 


(۲) نفس الحجم. 


لاحظ: 


٠‏ لا يشترط أن يكون حقلا المفتاح الأساسي في الجدولين لهما نفس الاسم. 


ه٠‏ يقوم تطبيق قاعدة البيانات بربط سجل رقم الطالب )١(‏ في الجدول الأول بسجل رقم الطالب )١(‏ في الجدول 
الثاني وهكذا لباقي السجلات حتى وإن كان إدخال السجلات في الجدولين بترتيب مختلف» المهم أن يكون 
محتوى حقلي الربط متماثلين. 

فمثلا يمكن استنتاج أن الطالبة رقم ۲ في الصف الدراسي 5/7 وحالتها الدراسية 'باقي". 


تدريب (5) 
العلاقة رأس برأس "006 70 016" بين جدولين 
بكتاب الأنشطة والتدريبات صفحة ١”‏ 


مثال (؟) 
جدول "المدرسين" جدول "الفصول" 
المدرس التليفون الفصل 


` شكل_(۸) حالة أخرى لعلاقة رأس برأس بين جدولين 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


من شكل (۸) نلاحظ أنه يُحدد لكل فصل رائد واحد فقط من المدرسين» حيث يرتبط حقل كود 
المدرس (516) في جدول 'المدرسين" بالحقل الأجنبي كود رائد الفصل (/1آ) في جدول 'الفصول" على 
أن يتم ضبط خصائص حقل كود الرائد غير قابل للتكرار ."Index No Duplicate"‏ 


لاحظ: 
يطلق على حقل كود رائد الفصل (۴۸) حقل أجنبي "لا©>! 016191" لأنه ليس من طبيعة الجدول 
ويذلك يعتبر حقل دخيل عليه. 


تدريب (5) 
العلاقة رأس برأس"06 70 006" بين جدولين 
بكتاب الأنشطة والتدريبات صفحة ۲٤‏ 

النوع الثاني: علاقة رأس بأطراف :One to Many‏ 
علاقة تربط بين جدولين بحيث يمكن أن يرتبط سجل في الجدول الأول بعديد من السجلات في 


الجدول الثاني والعكس غير صحيح. 
مثال: 


7 


جدول 006 جدول EN‏ 
جدول “1 5 55 جدول ا للاب” 
رقم الصف | اسم الصف | مكان الصف رقم الطالب | العام الدراسي | الشعبة | رقم الصف 
۱۰۱ الأول الدور الأول ۳ ۲۰٦‏ علمي ۱۰۱ 
۲۰١‏ الثاني الدور الثاني ٤‏ ۲۰ علمى ۳۰۱ 
۳۰١‏ الثالث الدور الثالث ۲۰٦ ١‏ أدبى ۱۰۱ 


ا تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


ادرس الشكل السابق وناقش مع زملائك ما يلي: (مع التوضيح بأمثلة لسجلات من الجداول) 
.١‏ هل ينتمي أكثر من طالب إلى نفس الصف؟ 
؟. هل ينتمي أحد الطلاب إلى أكثر من صف؟ 
۳. ما هى أرقام الطلاب فى صف . ” 


نلاحظ من الشكل (1) الآتي: 
© العلاقة بين جدولي "الصف" و 'الطلاب' علاقة رأس بأطراف من ناحية جدول الصفء حيث نجد أن 
كل سجل في جدول "الصف" يرتبط به عديد من السجلات في جدول 'الطلاب" أي أن الصف الواحد 
يوجد به عديد من الطلاب في حين أن الطالب لا ينتمي إلا لصف واحد. 
8 للريط بين الجدولين في علاقة رأس بأطراف ينبغي إضافة حقل المفتاح الأساسي في جدول 016 وهو 
جدول "الصف" إلى جدول 13١¥‏ وهو جدول "الطلاب" ويسمى في هذه الحالة 'حقل أجنبي' 
لا©»! Fren‏ لأنه ليس من طبيعة الجدول بل حقل دخيل عليه. 


في حقل المفتاح الأجنبي (رقم الصف بجدول الطلاب) يمكن تكرار البيانات» ويسمى التكرار المحكوم 
.Controlled redundancy‏ 
6# أن كل سجل في جدول "الصف" يرتبط بعديد من السجلات في جدول "الطلاب". 


© يقوم تطبيق قاعدة البيانات بريط كل سجل في جدول الرأس ©0176 "الصف" بسجلات الطلاب التي 
أمامها نفس رقم الصف في الحقل الأجنبي في جدول أطراف 14۷ "الطلاب". 


استنتاج علاقة رأس بأطراف 03101 0+ 006 بين جدولين 


بكتاب الأنشطة والتدريبات صفحة ۲٠١‏ 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


النوع الثالث: علاقة أطراف بأطراف Many to Many‏ 
علاقة تريط بين جدولين بحيث يمكن أن يرتبط سجل في الجدول الأول بعديد من السجلات في 
الجدول الثاني» وسجل في الجدول الثاني بعديد من السجلات في الجدول الأول. 


جدول الصف جدول المعلمين 
رقم الصف | اسم الصف | مكان الصف رقم المعلم | اسم المعلم ٠‏ التخصص 
الدور الأول ۳ أحمد كمبيوتر 
الدور الثاني ٤‏ ئى ا 
الدور الثالث ١‏ أمل لغة عربية 
۲ عمر رياضيات 
° هناء تربية فنية 
جدول الربط | 1 شرين | تربية رياضية 
رقم الصف a‏ 9 
١ ١٠١١‏ 
١ ۱‏ ج 
معًا مفتاح أساسي مركب 
٤ ۲۰١‏ 
Composite key i‏ 
٠ ° ۳۰١‏ 
في جدول الربط 
۳۰١‏ 5 
۰١‏ ۶ 


شكل )٠١(‏ يوضح العلاقة أطراف بأطراف بين جدول "الصف" وجدول المعلمين 


ادرس الشكل السابق وناقش مع زملائك ما يلي: (مع التوضيح بأمثلة لسجلات من الجداول) 


سے 


.١‏ هل يدّرس أكثر من معلم في نفس الصف؟ هد ب 
".هل يدرس أحد المعلمين في أكثر من صف؟ 7 
۳. حدد أرقام المعلمين الذين يذرسون في فصل ١٠"؟‏ المت ا 
ها للفسرل ا يدرس يها ال رف ۶٥‏ ا 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


نلاحظ من الشكل )٠١(‏ الآتي: 

© العلاقة بين جدولي 'الصف" و 'المعلمين" علاقة أطراف بأطراف» حيث نجد أن كل س جل في جدول 
'الصف" يمكن أن يرتبط به عديد من السجلات في جدول 'المعلمين' وأي سجل في جدول 'معلمين' يمكن 
أن يرتبط بعديد من السجلات في جدول "الصف" أي أن الصف الواحد يمكن أن يُدرس فيه أكثر من مُعلم؛ 
وأيضًا يمكن للمعلم الواحد أن يقوم بالتدريس في أكثر من صف. 


رقم الصف | اسم الصف | مكان الصف رقم المعلم | اسم المعلم التخصص 
۱۰۱ الأول الدور الأول ۳ أحمد كمبيوتر 
۲۰١‏ الثاني الدور الثاني 6 منى لغة إنجليزية 
۳۰۱ الثالث الدور الثالث ١‏ أمل لغة عربية 
١‏ عمر رياضيات 
ه إهناء تربية فنية 
5 شرين تربية رياضية 


6 قبل الربط بين الجدولين في علاقة أطراف بأطراف ينبغي إنشاء جدول جديد يحتوي على حقل المفتاح 
الأساسي في جدول الصف وهو "رقم الصف" وحقل المفتاح الأساسي في جدول 'المعلمين" وهو رقم المعلم'“ 
وأن يتم تعيين الحقلين معًا مفتاح أساسي مركب K۷‏ 60111005116 في جدول الريط. 


رقم الصف رقم المعلم 
١ 1۰۱‏ 
۲۰١‏ ۲ 
۲۰١‏ 3 
۲۰۱ ° 
۳۰۱ ° 
۳۰۱ 5 
1۰۱ ۳ 


6 العلاقة أطراف بأطراف هي علاقة نظرية في مفاهيم قواعد البيانات» ولا يمكن تمثيلها عمليًا في برامج إدارة 
قواعد البيانات Access - Oracle - MySQL Jn‏ ... الخ. 


© لذا تم تكسير العلاقة إلى علاقتين: 
الأولى: علاقة رأس بأطراف بين جدول "الصف" وجدول الربط بحيث يكون الرأس هو جدول "الصف 
والأطراف من ناحية جدول الريط. 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


الأخيرة: علاقة رأس بأطراف بين جدول 'المعلمين" وجدول الريط بحيث يكون الرأس هو جدول "المعلمين"؛ 
والأطراف من ناحية جدول الربط. 


مما سبق يتضح أن: 

٠لا‏ يمكن تكرار البيانات في حقل المفتاح الأساسي في جدول "الصف" . 

٠لا‏ يمكن تكرار البيانات في حقل المفتاح الأساسي في جدول 'المعلمين'. 

٠لا‏ يمكن تكرار رقم معلم ورقم الصف معا في جدول الريط لأنهما معا يمثلان مفتاح أمساسي مركب 
COMPOSITE KEY‏ كما هو موضح على الشكل. 

٠كل‏ صف في جدول "الصف" يمكن أن يذرس له عديد من المعلمين» وأيضًا كل معلم يمكن أن يدّرس في 


استخدام أحد تطبيقات نظم إدارة قواعد البيانات في إنشاء قاعدة البيانات مثل: 
Oracle‏ أو Access MS‏ أو MySQL‏ 
سوف نستخدم تطبيق ا1۷8 حيث أنه من التطبيقات المجانية ۴۴٠۵ ۷2٠‏ مفتوح المصدر 
«OpenSource‏ ويسمح بالتعامل مع كم هائل من البيانات وتستخدمه كبرى الشركات العالمية خاصة في 
مجال تكنولوجيا المعلومات مثل: ©1116105161:»6009©1 Yah and‏ ولمزيد من المعلومات حول 
بعض الشركات التي تستخدم 1/1501 يمكن زيارة الموقع التالي: 


http://www.mysql.com / ناء‎ 5 60111 15 / 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


عادة ما تضم التطبيقات المستخدمة في نظم إدارة قواعد البيانات كائنات 05[8615 أساسية أهمها: 
ê‏ جداول 138165: من خلالها يمكن إنشاء جداول قاعدة البيانات بما تحويه من سجلات وحقول وامكانية 
إدخال بيانات فيها وعرضها وتعديلها. 
6 استعلامات 01060165: الاستعلام عبارة عن سؤال يوجهه المستخدم لقاعدة البيانات بقصد الاستعلام عن 
بيانات أو معلومات بالجداول؛ فيعرض البيانات المطلوبة» ومن خلال الاستعلام يمكن عرض بعض حقول 
من جدول بيانات أو يعرض بعض سجلات من جدول أو أكثر بناءَ على شرط معين ...إلخ. 
لإنشاء قاعدة بيانات مشروع 'قاموس مصطلحات الكمبيوتر المصور" باستخدام تطبيق 
501 لالااء اتبع إجراءات النشاط التالي: 


إنشاء قاعدة بيانات باستخدام برنامج اySQ١×‏ ك 3 1 72 
بكتاب الأنشطة والتدريبات صفحة ۲۷ ١‏ 4 


ويعتبر هذا النشاط مرشدًا يمكنك تحت اشراف معلمك من إنشاء أي جداول أخرى في قاعدة البيانات حسب 
احتياجاتك. بالخصائص التالية: 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


خصائص قاعدة بيانات المشروع: 
اسم قاعدة البيانات: dbdictionary‏ 


اسم جدول البيانات: 76515 
ويضم عدد (ه) خمسة حقول كما هو موضح بالجدول التالي: 


Table: Terms 
# Name Type Length values Index 
1 Id Integer 5 Primary 
2 Term VarChar 50 
3 Trans VarChar 50 
4 Defe VarChar 20 
5 Picture VarChar 30 


لاحظ: 


في مشروع إنشاء قاموس مصطلحات الكمبيوتر المصور تم إنشاء قاعدة بيانات من جدول واحد للتبسيط. 


نشاط (۲) 


ادخال بيانات في جدول ٥۲٣۶‏ باستخدام ۸۷501 
بكتاب الأنشطة والتدريبات صفحة ٠۲‏ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


الوحدة الثالثة 


انشاء صفحات موا قع 
في نهاية الوحدة يتوقع أن يكون الطالب قادرًا على أن: 


.١‏ يوظف بعض أدوات التعلم الإلكتروني في إنتاج مشروعه. 


. يوظف تطبيقات تكنولوجيا المعلومات والاتصالات في بناء محتوى تعلمه. 


. يوظف التطبيقات المناسبة في معالجة عناصر الوسائط المتعددة (صوت - فيديو-صورة ...). 
. يتعرف لغة ‏ 1۲11 و۴1۴ وتطبيقاتها في تصميم مواقع الويب. 

. يمارس مهارات التعامل مع المعلومات الإلكترونية (تحديد ‏ تقييم - انتقاء - تنظيم). 

. يوظف مصادر المعلومات الإلكترونية المرتبطة بمشروع محدد في تنفيذ المشروع. 

. يتعرف بعض المعاملات الخاصة والمتعلقة بلغة 4۲ ۴. 


. يتعرف بعض المفاهيم والصيغ الخاصة بجملة ۴| وجملة إعأسSw.‏ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


الموضوع الأول 
لغة 2112 & ,113/1 آ]وتطبيقات 


تصميم مواقع الويب 


اج العم 
في نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن: 
-١‏ يمارس خطوات إنشاء موقع باستخدام تطبيق We‏ 01©655101اع. 
؟- يتعرف لغة الترميز 471011]. 
"- ينشئ صفحة ويب بكود 1 1۲. 
4:- يشرح مكونات الشاشة الرئيسة لبرنامج .Expression Web‏ 
5 یربط بين صفحات الويب بكود 01 1۲. 
٦‏ يتعرف لغة البرمجة 4ط 


۷ يوظف برنامج ۷٥‏ 1655101« في الربط بين صفحات موقع ويب. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


إجراءات إعداد ملفات ومجلدات المشروع: 


١-إنشاء‏ مجلد للمشروع باسم 2161101731 داخل المجلد 1006©5] 


قبل البدء في انشاء صفحات الموقع»ء علينا تنظيم الملفات بأنواعها المختلفة التي سيتم عرضها على 
صفحات الموقع» والتي ينبغي أن تكون في مجلد واحدء حيث يحتوي على مجلدات فرعية لتصنيف 
الملفات التي يتم عرضها على صفحات الموقع» ويتم تصنيفهم الى مجلد لملفات الصور ومجلد لملفات 
الفيديو ... إلخ» وبذلك يتم إنشاء مستودع معلومات /[0516©1© 18 111101111361017 للمشروع 


.Project 


لاحظ: 


عند تثبيت !105631 برنامج ۸1۴۴ يتم ذلك بشكل افتراضي داخل مجلد باسم ۴۴ ×AN‏ على 
مشغل الأقراص :© وبه مجموعة من المجلدات منها مجلد باسم 5٥40ء‏ وينبغي إنشاء مجلد المشروع باسم 


"Dictionary"‏ داخل المجلد 110065 ليصبح المسار كما يلي: 


C:\xammp\htdocs\dictionary 
وهو المسار الذي سوف تستخدمه في حفظ ملفات المشروعء وحفظ المجلدات الفرعية للموقع وذلك‎ 
.Localhost (Server) بمثابة نشر للموقع على الخادم‎ 


؟-انشاء صفحات الموقع: 


تذكر عزيزي الطالب أننا في مرحلة وضع تصور مقترح للمشروع حيث سبق 
تحديد الصفحات التي سيتم إنشائها في الموقع المقترح (صفحات الموقع)» وهي: 


/ تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ۳ ا 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


«صفحة |دخال مصطلح: 


"Add_term.php" 
والتي تستخدم في إضافة مصطلح جديد.‎ 


«صفحة البحث ع١‏ 


"Search_term.php'" 
وتستخدم في البحث عن مصطلح وعرض بياناته.‎ 


"Edit_term.php'" 
ومن خلالها يمكن تعديل أي بيان من بيانات‎ 


«صفحة حذف مصطلح: 


"Del_term.php'" 
ومن خلالها يمكن حذف مصطلح معين.‎ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


«صفحة المساعدة: 
|1111 
"Help.php"‏ 
ومعلومات حول كيفية التعامل مع موقع 
'قاموس مصطلحات الكمبيوتر المصور. 


«صفحة الاتصال بقاعدة "م007641007.01" لفتح اتصال بقاعدة البيانات على جهاز 
الخادم. 
ه صفحة :"Header.php'‏ تحتوي على الآتي: 
.١‏ الصورة 52171761 التي تعرض أعلى كل صفحات الموقع. 
۲. الارتباطات التشعبية 11/611115 بجميع صفحات الموقع. 


٠‏ الصفحة الرئيسة "1067.01 وتعرض واجهة الموقع: 


نظرًا لخطورة عمليتي التعديل في بيانات المصطلح أو حذفه من الموقع» فقد تم منح هذه 
الصلاحية للمستخدم الذي يقوم بتسجيل دخوله فقطء وهو ما ستقوم بتنفيذه في مرحلة تأمين الموقع في الوحدة 
الخامسة من هذا الكتاب» وبذلك ينبغي على المستخدم الذي سجل دخول أن يقوم بتسجيل خروج من الموقع» 2 | 
وذلك بعد إنتهاء تفاعله مع موقع 'قاموس مصطلحات الكمبيوتر المصور'. ْ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


أيَا كان التطبيق المستخدم في إنشاء صفحات الموقع» فإنه يعتمد على استخدام لغة الترميز 2171/11, لذا 
نتطرق إلى أهم المعلومات والمهارات الأساسية في لغة الترميز 111/11! وتطبيق «Expression Web‏ 
للمساعدة على إنشاء صفحات الموة 5 


لغة تكويد تستخدم في إنشاء صفحة ويب ثابتة تحفظ بامتداد 176137. أو 191113!1. بحيث 
يمكن عرضها وترجمة الكود الخاص بها من خلال أحد برامج مستعرضات الإنترنت. 
ويذلك يمكن كتابة كود ا1۲ باستخدام أحد برامج معالجة النصوص مثل: 
Notepad and ....... )‏ ,0230 هلالا (MS Word,‏ 


مع مراعاة الآتي: 
© الأمر الذي يتم كتابته بلغة الترميز ا۳۲ يطلق عليه ۰۲39 ولا يشترط أن يكتب بحروف كبيرة 


1م03 أو صغيرة |/5113. 
© أن يكتب الكود وفق بناء محدد كما بالشكل التالى: 


۱ <html> : 
: <head> : 
| [seme | 
1 </head> 
| <body> : 
: : 
1 <body> 2 


</html> HTML 


شكل )١١(‏ يوضح بناء 5110641016 ملف لغة الترميز ا1۲۸۷ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


ادرس الشكل السابق وحاول استنتاج خصائص لغة الترميز !11/1 !ا: 
© خصائص لغة الترميز .1117/1]: 


.> < الأوامر 1365 في لغة الترميز ا1۲ توضع بين العلامتين:‎ .١ 


شكل )١١(‏ الشكل العام لد ٠۵9‏ في لغة الترميز ا٧1۲‏ 


مع ملاحظة الآتي: 
« لكل 136 وظيفة معينه يقوم بها. 


.>815< بعض 1305 ليس لها إغلاق أو نهاية مثل‎ ٠ 
. بعض ال كوه لها خصائص يمكن تعيينها معه في بداية ال1390‎ ٠ 


۳. يبدأ الكود ب <1111901> وينتهي ب </111171/> وبينهما الآتي: 
<Head> </Head>‏ يستخدم في عرض معلومات مثل: وصف للموقع وعن كاتب 
الكود واللغة ...إلخ. 

<11616/> <1118>) يختص بكتابة عنوان لصفحة الويب يظهر في 8531 ©1111 
لشاشة مستعرض الإنترنت وهو جزء من 739 <11©201>. 

</Body>‏ <رله 8> | نضح فيه كافة أنواع المعلومات المراد عرضها على صفحة مستعرض 
الإنترنت من النصوص والتأثيرات التي تتم عليها والصور والفيديو والأصوات 
والجداول والارتباطات ... إلخ. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


4. ملخص ما تقوم بعرضه الأقسام الرئيسة لكود ا١‏ 1۲: 

نهاية ال وهآ بداية ال712390 
HTML>‏ |< جميع محتويات الصفحة <HTML>‏ 
HEAD>‏ |< رأس الصفحة <HEAD>‏ 
TITLE>‏ |< نوان الصفحة <TITLE>‏ 


<BODY> محتوى الصفحة‎ >| BODY> 
ملخص الأقسام الرئيسة لكود ا1۲۸۷‎ )١١( شكل‎ 
:1۲ 1 حفظ كود لغة الترميز‎ © 
يشترط لحفظ كود ا1۲1 في ملف مراعاة أن:‎ 6 
. .ہ٤ہا أو‎ .۸٤۳ يحفظ ملف كود ا1۲ بأي اسم يكون امتداده‎ .١ 
نوع الملف نصي 112171؛ ويفضل استخدام برنامج المفكرة 110160301 لأنه يحفظ الملف‎ .١ 
بهذا النوع مباشرة دون اختيار منا.‎ 
ا× اھا‎ 


File Edit Search Help 
<HEAD> 62e ¡^ | ا ك2 |- تدريبات لت‎ 


<TITLE> 


<#TITLE> 
<#HEAD> 


<BODY> 


<#BODY> 


File name: | Train1.htmf 
Save as lype: [Text Documents -[ مه _ر‎ | 
ڪڪ‎ 2 


شكل )١4(‏ حفظ هيكل برنامج ا1۲ المكتوب في برنامج المفكرة (24م٥)ه١)‏ 
6 بعد حفظ الملف بالمواصفات السابقة يأخذ الملف رمز مستعرض الإنترنت المتاح على جهازك مثل: 


Internet Explorer‏ أو Google Chrome‏ أو Mozilla Firefox‏ ... الخ. 


© يكون رمز الملف في حالة .Internet Explorer‏ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


6 ناقش معلمك وزملائك عن شكل رمز الملف في حالة وجود أكثر من مستعرض إنترنت على جهازك. 


نشاط )١(‏ 
"إنشاء صفحة ويب باسم 7651.501 " باستخدام كود 1۲۸1 
تحت إشراف معلمك اتبع الاجراء ات بكتاب الأنشطة والتدريبات 


) "٤ ( صفحة‎ 


ادرس الكود الخاص بالنشاط: 


16511 .1110[1 الخاص بملف‎ 1H۲1 كود‎ 
| ا‎ 
<HTML> 
<Head> 
<T1tle> 
My First web Page 
</T1tle> 
</ Head> 
<Body> 
الكمبيوتر التعليمي‎ 
<p align = "Center"> 
<img src = "Egypt. jJP9g"> 
>111< تحيا مصر‎ >/ ۸1< 
</p> 
(<p align = "rîght"> <م/< الصفحة الثانية‎ 
</ BOQdYy> 
</HTML> 


الجدول التالي يحتوي شرحا لبعض أكواد 1171/1 المستخدمة في النشاط 
ناقش معلمك وزملائك في أجزاء الكود المتضمنة في الجدول التالي: 


زر تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي م o۳‏ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


الشرح الكود 
<Title>‏ 
إضافة عنوان لصفحة الويب. My First Web Page‏ 
Title>‏ < 
كل نص يكتب في </8001> يظهر على صفحة الويب» <Body>‏ 
ناحية اليسار باعتباره الاتجاه الافتراضي للكتابة على شاشة الكمبيوتر التعليمي 
المستعرضن. 
الكود <8> فقرة جديدة» و"1 ©0601" = ”واج خاصية 
تعني محاذاة النص التالي لها توسيط على شاشة المستعرض <p align = 'Center'>‏ 


إلى أن يُغلق ال و1 <۴/>. 

51 100 تعني Source"‏ 111306" مصدر الصورة 
ويكتب بعد علامة ">" المسار 365 واسم ملف الصورة <img src = 'Egypt.jpg'>‏ 
بالامتداد ويوضع بين علامتي تنصيص. 

1 تعني "1830" يقصد بها أن النص الذي يليها عنوان 
ويظهر بحجم خط حسب الرقم الذي يلي حرف !! ويكون من 


>!41< خط أقل <11/> تحيا مصر‎ ٦ إلى أكبر خط والرقم‎ ١ حيث يشير الرقم‎ ٦ إلى‎ ١ 
حجمًا وهكذاء وتظهر عبارة 'تحيا مصر' أيضًا في منتصف‎ 
السطر حيث أن <۴> لم يُغلق بعد.‎ 
<p align = 'right'> 
كتابة نص على صفحة الوبب محاذاة يمين . الصفحة الثانية‎ 
<|p> 


(٦ ) j8 +‏ 
استخدام كود 1۲۸1 في إنشاء صفحة ویب باسم 1م0غ562.6©+ 
تحت اشراف معلمك اتبع الإجراءات بكتاب الأنشطة والتدريبات 


صفحة ( ۳۷ ) 


| تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


ادرس الكود الخاص بالنشاط: 
كود 1۲ML‏ الخاص بملف .)es12 ۸٤٣١‏ 


® Test2.htm - Notepad 


My second web Page 
</TI1Itle> 
</ Head> 


<Body> 
ا مصر إن شاء الله آمنين‎ 
<P align = طن حم"‎ "<< 
<img src = " وم ( . +ملاوع‎ "' 
heîght=50 width=100> 
الصفحة الأولى‎ </P> 
</ BOQdYyY> 


</HTML> 


ادرس الكود السابق مع عمل مقارنة بالكود في النشاط السابق» ثم ناقش معلمك وزملائك. 


يمكنك عزيزي الطالب إنشاء صفحة و 
ويب أو التعديل فيها باستخدام العديد من 
الايد أو البرامج الجاهزة بسرعة (FS‏ 
وسهولة بدلا من كتابة أكواد 471/11!. و( سس 0 


ظ | > 


إليك طريقتين لعمل ربط بين صفحتي الويب اص†test1.1‏ هو :test2.html‏ 


أولاً: الربط بين صفحات الويب في كود لغة الترميز 411/11!. 


عزيزي الطالب/الطالبةء بعد إنشاءك صفحتي الويب اماغط.561ع+ و test2.html‏ 


باستخدام لغة الترميز ا1۲ تحتاج للتعديل في صفحتي الويب والربط بينهما من 
خلال نص أو صورة» وهو ما يمكنك تنفيذه بتعديل الكود في لغة الترميز 71/1!!. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


j 2+‏ )۲( 
الربط بين صفحات الويب بكود لغة الترميز 1۲۸1 
تحت إشراف معلمك اتبع الإجراء ات بكتاب الأنشطة والتدريبات 


صفحة ( ۳۹ ) 


ثانياً: الربط من خلال أحد تطبيقات إنشاء مواقع ويب 


عزيزي الطالب/الطالبةء يمكنك أيضًا التعديل في صفحتي الويب والربط بينهما من 
خلال نص أو صورة بتوظيف تطبيق Web‏ 150أ5د16م<اط. 


يمكن تحميل برنامج ا۷۵ 5701655101 لإنشاء مواقع وصفحات ويب من خلال واجهة تطبيق 
سهلة وبسيطة بدلا من كتابة أكواد 1۲01 كالتالي: 


@ تحميل بر نامج :Expression Web‏ 


ه من قائمة 51311 اختر البرنامج 4 Microsoft Expression Web‏ كما بالصور التالية: 


ansaryNeW وك‎ 


Microsoft‏ لال 


(| Microsoft Expression Web 4 
للى‎ Microsoft Expressi Expression Web 4 
ل‎ Microsoft Expression 51850 SUK 


شكل )١5(‏ تحميل تطبيق We‏ 1551010م<اا 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


| لتظهر الشاشة الافتتاحية للبرنامج والتي من أهم مكوناتها:‎ ٠ 
أ‎ EEE 


§ 6 86 


#۴ x Se Vie 


Contents of 'C:\xampp \htdocs\Pictic 


كعا/اك نزامميم 


| كامتاتعم يرف كممعم 8‏ وحتطوتاطنم ‏ دعلامم ْ 


شكل )١١(‏ مكونات الشاشة الرئيسة لبرنامج Expressi0n Web‏ 


.Menu Bar شريط القوائم‎ )١( 

(۲) نافذة قائمة المجلدات 1158 /©5010. 

(۳) نافذة الخصائص Tag Properties.‏ | 
)٤(‏ مكونات موقع الوب .Web Site component‏ 
(5) نافذة صندوق الأدوات 100150©1. 

(5) نافذة أنماط التطبيق 51/1 yاممA.‏ 


جملة Nhat You See !15 What You Get'‏ بمعنى: أن ما تراه هو ما تحصل عليه. ْ 


٠‏ كما يمكن عرض كود ا1۲ الخاص بصفحة الويب والتعديل فيه؛ فمثلا يمكننا استخدام التطبيق في 
الريط بين صفحتي الويب من خلال شريط الأدوات وذلك بعمل إرتباط تشعبي 1/0©1111714!» على نص 
ة بديّلا لكود ا1۲ التا 


کے 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


<"العنوان المراد الانتقال إليه"- ۴١۴۴‏ 23> 


النص أو الصورة المراد ربطها بالعنوان 
/a>‏ < 


٠‏ وهو ما يتضح من خلال النشاط التالي: 


نشاط )٤(‏ 
"الربط بين صفحات الويب باستخدام برنامج "Expression Web‏ 
اتبع الإجراءات بكتاب الأنشطة والتدريبات 


5 ٠ 


) ٤١ ( صفحة‎ 


إنشاء موقع المشروع 


قبل إنشاء أي صفحة بالموقع لابد من إنشاء موقع للمشروع باستخدام برنامج 
Expression Web‏ ثم انشاء كافة الصفحات به كما هو مخطط. 


نشاط (ه) 
"إنشاء موقع المشروع باستخدام تطبيق 
"Expression Web‏ 

اتبع الإجراءات بكتاب الأنشطة والتدريبات ‏ لت آ54 


) ٤١ ( صفحة‎ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


إنشاء صفحة "صHeader.php"‏ 


E‏ اه رست 


ine 25, Column 2 ا‎ | r Hr CS21 1197x347 


شكل (۱۷) صفحة "صHeader.php"‏ 
ادرس الشكل السابقء وحدد الأجزاء المتكررة في جميع صفحات الموقع: 
تحتوي هذه الصفحة على الأجزاء المتكررة في جميع صفحات الموقع كما -يتضح من الصورة السابقة-وهي: 
© الصورة في بداية كل صفحة ويطلق عليها .Banner‏ 


النصوص السابقة تظهر على شاشة ١‏ لمستعرض مجرد كلمات غير مرتبطة بصفحات 
الموقع أي أنها لم تصبح بعد روابط تشعبية ٣)‏ امم1y.‏ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


وتهدف صفحة "مم ٣1۴400۲.‏ "'باختصار إلى إدراج صورة ثم كتابة بعض النصوص التي 
تفصل بينها مسافات» كما يتضح من شاشة الكود الثالية: 


Site View اي‎ x 


1 <html dir="rtl"> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type'"> 
<head> 
<body> 
<div> 
ف‎ <img height='161' src='images/banner.jpg' width='1267' > ١ لمقطع‎ ١ 
مقطع‎ </div> ظ لاول‎ 
<div style="width: 1256px;text-align:right" > 
&nbsp; 
الرئيسية‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
إضافة مصطلح‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


O 4‏ البحث عن مصطلح 
المقطع الثاني &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;‏ 
حذف مصطلح 


&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
تعديل مصطلح‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
مساعدة‎ 

E <div> 

23 </body> 

24 <html> 

e SL Eee 


زا نيا طب ي 


1 5 


شكل )١18١(‏ نافذة كود صفحة 

نلاحظ في الكود الذي تم إنشاؤه ما يلي: 
9# يستخدم ال 7599 التالى للانشاء_مقطع بالصفحة كما هو موضح بالشكل السايق: 
ا ا 


<div> 


"Header.php 


كود ا1۲ الخاص بهذا المقطع 


١ 
١ 
| 
| 
| 
1 
١ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


خاص بإدراج صورة 831313617 من الملف '0إ[.193171161/ 1173065" مع ضبط خاصيتي 
<div>‏ 
<img  height=' 161' src=' imaqes/banner. jpg! width='1267'>‏ 


ew headerl.php* * 


<body>] [<p>] <img> 


Tag Image 


Apply Styles 


اليد 


Select CSS style to apply: 


الخاصية ,5 مصدر 


شكل (۱۹) إنشاء صور 53111617 وضبط خصائصها 
المقطع الثاني: 
تم ضبط بعض خصائصه من عرض ومحاذاة يمين» ثم كتابة اسماء صفحات الموقع, وترك بعض 
المسافات بالكود 8111250 وهو اختصار يعنى "©5236 ©516231321 8101" ويفيد فى ترك مسافة واحدة 
كما يظهر بالكود التالي: 


زر تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 4 ١‏ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


<div style="width: 1256px;text-align:right" > 

&nbsp; 

الرئيسية 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
“+ اد‎ 


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
البحث عن‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
حذف‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
تعديل مصطلح‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
مساعدة‎ 
</div> 


شكل )۲١(‏ جزء الكود الخاص بعناوين صفحات الموقع 
كما يمكن إنشاء صفحة "م طم.۲ء لهه" بلغة الترميز ۳۲01 أو أحد تطبيقات 
إنشاء صفحات ويب بالكود التالي: 


1 <html dir="rtl'"> 
2 <head> 
3 <meta content="text/html; charset=utf-8" http-equiv="Content-Type'"™ 
4 <head> 
5 <body> 
< >: 
7 <img height='161' src='images/banner.jpg' width='1267' > 
<div> 


<div style="width: 1256px;text-align:right" > 
<a <ج/>الرئيسية<" رام :1ن" ماع11‎ 
&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp; 
<a href="add term.php'">& bsp; glطصم إضافة‎ 
<Jaz&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="search text.phpص">glطصم <ج/>البحث عن‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="Del Term.php">glطصم <ھ/>حذف‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="Edit 1erm.php"> glطصم تعديل‎ 
<laz&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="Help.php">5دعاسa‎ </a> 
</div> 
</body> 
24 <html> 


شكل )١١(‏ كود إنشاء صفحة صٍHeader.ph‏ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


من دراسة كود 171/1] السابق نلاحظ ما يلي: 


)١(‏ تم فتح مقطع <۷> واغلاقه <۷ @/> ووضع بينهما كود إدراج الصورة التي نرغب أن تكون 
21 يظهر في بداية جميع صفحات الموقع. (رقم ١‏ على الشكل) 

(۲) المقطع الثاني يؤدي إلى عمل تنسيق محاذاة يمين لكل ما يليه» وحتى إغلاق المقطع» مع جعل 
النصوص العربية إرتباطات ٣)‏ ام ل۳ بصفحات الموقع. (رقم ۲ على الشكل) 

)"( الكود التالي: 


<a href = 'index.php'> الرئيسة‎ </a> 


يشير إلى: 
e‏ بداية ال"13©0": 
0 بداية كود يتم بها إدراج إرتباط تشعبي بالعنوان 
وهو هنا "اسم الصفحة". 
<"ndex.phpا' href=‏ 3> | 0 الذي يلي علامة "=". 
© والذي قد يكون اسم ملف أو اسم برنامج أو 
اسم صفحة ويب أو عنوان إنترنت ...إلخ 


٠‏ نهاية ال'12360": 
</a>‏ © ثم إغلاق الكود ب </ج>. 


)٤(‏ 825 اختصار يعني "522366 ماطج)aهاB‏ ٧0ل‏ ' وتفيد ترك مسافة واحدةء ولترك ست 
مسافات بعد كلمة 'الرئيسة" تم كتابتها ٠‏ مرات يلي كل منها ":". 

() وبنفس الفكرة تستطيع عزيزي الطالب أن تكرر الكود السابق مع استبدال كلمة 'رئيسة" بنص إدخال 
مصطلح”؛ ثم نص 'البحث عن مصطلح” ثم نص 'تعديل مصطلح' ثم نص" حذف مصطلح“ ثم 
كلمة 'مساعدة" ليصبح كل منها إرتباط تشعبي. 
والصفحة '16301617.010]": يتم استدعاؤها بأمر واحد بسيط في بداية كل صفحة من صفحات 


الموقع بدلا من تكرار الكود. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


يمكنك إنشاء صفحة 62061.15 باستخدام برنامج (اعلالا 0:655100<ع كما يلي: 
إدراج صورة» وكتابة بعض النصوص تحتهاء وإجراء بعض التنسيقات عليهاء لتظهر بشكل مناسب. ١‏ 


"إنشاء صفحة /306ع1] من نوع P۳4۲‏ في شاشة التصميم" 
وهو ما ستقوم بتنفيذه تحت اشراف معلمك بكتاب الأنشطة والتدريبات 


) ٤۹ ( صفحة‎ 


يمكن ربط كل نص أسفل صورة 8301067 بالصفحة الخاصة بها من خلال النشاط التالي: 


نشاط 0 
"إنشاء الإرتباطات التشعبية لصفحات الموقع" 
وهو ما ستقوم بتنفيذه تحت إشراف معلمك بكتاب الأنشطة والتدريبات 


) ٠١ ( صفحة‎ 


إر تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي م ٦٤‏ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


إنشاء صفحة الاتصال بقاعدة البيانات Connection.php‏ 


نحتاج في جميع صفحات موقع 'قاموس مصطلحات الكمبيوتر المصور" إلى إضافة مصطلح أو 
تعديل بياناته أو البحث عنه أو حذف مصطاحح من قاعدة البيانات» الأمر الذي يتطلب فتح اتصال 


يقاعذة البيانات حتى بشني نا إجراء هذه العمليات على بيانات قاعذة البيانات: 


عند إنشاء صفحة الاتصال بقواعد البيانات نحتاج إلى التعامل مع متغيرات: 
قبل إنشاء صفحة الاتصال بة 


|» 


المتغيرات والثوابت في لغة 0]:18: 
لقد تعرضت عزيزي الطالب في الحلقة الإعدادية لمفهوم المتغيرات والثوابت» والمفهوم لا 
يختلف عما سبق دراسته؛ ولكن دعنا نلق بعض الضوء من منظور لغة 2]!8. 


8 المتغيرات ف لغة 18]: 
- المتغير عبارة عن مخزن في الذاكرة يحدد له اسم ونوع ويخصص له قيمة تخزن فيه» وتتغير قيمته 
أثناء سير البرنامج» فمدَّلا إذا كان المتغير 870481 يساوي .٠٠١‏ فإنه يمكن تغيير القيمة التي تم 


3-3 


تخصيصها بقيمة أخرى في لغة 5148, بجملة الت التالية: 


$Total = 450; 


\ 
نلاحظ الآتى: [ Hl‏ 


- يتم الاعلان عن المتغير عند استخدامه. 
- اسم المتغير يبدأ بعلامة '5". 
= يتكون اسم المتغير من أحرف وأرقام وعلامة "_" فقط مثل: 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


$Password - 58123 - $user_name‏ ....الخ. 
- اسم المتغير يفضل أن يكون معبرًا عن محتواه أو ما يشير إليه. 
- علامة التخصيص هي ">". 
- تنتهي كل جملة في لغة ۴١١۴‏ بعلامة ":". 
- لطباعة أي معلومات على شاشة المستعرض نستخدم 0184 أو E۸٥‏ هكذا : 
print $total;‏ - 
OR echo ('$total');‏ - 
- يمكن استخدام كود 156100 لتجميع أكثر من ثابت أو متغير عند الطباعة على شاشة المستعرض 
وذلك بالفصل بينها بنقطة ' . '. 
وهناك صيغة أخرى لطباعة قيمة المتغير كما يتضح من المثال التالي: 
$name="Mohamed';‏ 
echo "my name is $name';‏ 
echo 'my name is $name';‏ 
echo 'my name is ' .$name;‏ 
عند تنفيذ الكود السابق تكون نتيجته على شاشة مستعرض الإنترنت كما يلي: 
my name is Mohamed‏ 
my name is $name‏ 


my name is Mohamed 
نلاحظ من تنفيذ الكود السابق ما يلي:‎ 


٠.‏ في جملة الطباعة الأولى تم طباعة قيمة المتغير عند وضعها داخل علامتي التنتصيص 


."Double 0110131101" المزدوجة‎ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


٠‏ بينما تم اعتبار المتغير بين علامتي التنصيص المفردة ' 01101311011 ©5101 ' نص 
وطبع بالشكل التالي 51031176 15 1131176 .ny‏ 
٠‏ في جملة الطباعة الثالثة تم استخدام النقطة لطباعة سلسلة حرفية وقيمة المتغير. 
يمكن استعراض بعض أنواع المتغيرات في لغة 115 من خلال الجدول التالي: 


النوع نوع البيانات Example‏ 
String‏ حرفي ”Mohammad“‏ 
Integer‏ عددي صحيح 123 
Double‏ عددي يقبل الكسور العشرية 1.23 
Boolean‏ منطقي True / False‏ 


© والجدير بالذكر أنه لا يتم الإعلان عن المتغير ونوعه في لغة 5015 وإنما يتعرف مترجم 
Apache‏ على نوع المتغير من خلال القيمة المخصصة للمتغير في جملة التخصيص. 


6 فمتلا: تستطيع عزيزي الطالب معرفة نوع أي متغير باستخدام الدالة :(5۷1) ٥م0۷‏ وذلك 


بالكود التالي: 
<?php‏ 

متغير يساوي قيمة حرفية // $U_name='mohamed';‏ 

طباعة نوع المتغير // echo gettype($U_name);‏ 

النزول على السطر التالي // "</ echo "<br‏ 

echo 'Welcome to PHP'; // PHP طباعة رسالة ترحيب بلغة‎ 

النزول إلى السطر التالي // ;'>/ echo "<br‏ 

طباعة نوع متغير آخر لم يتم استخدامه || echo gettype($test);‏ 
<2 


إر تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 6 ۷ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


نلاحظ أن: 
ناتج تنفيذ الكود طباعة نوع المتغير ©173117_لا8 على صفحة مستعرض الإنترنت بأنه 
"tri"‏ ثم يترك سطر ويطبع رسالة الترحیب "2118 t٥‏ ©015جاعلال", ثم يترك سطر ويطبع ااNu‏ 
أي قيمة المتغير فارغ نظرًا لعدم تخصيص قيمة له. 


6 الثوابت ف لغة 117 : 
أما الثوابت فهي مخازن في الذاكرة تحمل اسم ونوع وبخص ص لها قيمة ثابتة لا تتغير طوال تنفيذ 


البرنامج» ويمكن تعريفها من خلال الصيغة العامة التالية: 


Define (‘Constant Name', Value); 


هك Constant Name‏ تشير إلى اسم الثابت. 
ه 2106لا تمثل القيمة المخصصة للثابت. 


مع ملاحظة أنه لا يتم وضع علامة $ أمام اسم الثابت عند استخدامه ولكن يتم تعريفه 10©1106. 


فعلى سبيل المثال: 


Define ('name', 'Mohamed'); 


Echo (‘my name is: '. name); 


٠‏ تستخدم النقطة (.) في سطر الكود الثاني لربط سلسلتين حرفيتين. 
٠‏ تم استخدام الثابت بدون علامة $. 
٠‏ استخدمت كلمة 1716© لتعريف الثابت. 
٠‏ ينتهي كل سطر في لغة 8115 بفاصلة منقوطة (:). 
عند تنفيذ الكود السابق تكون نتيجته على شاشة مستعرض الإنترنت كما يلي: 
my name is: Mohamed‏ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


والجدير بالذكر أن المتغيرات والثوابت تتأثر بحالة الأحرف كبيرة أو صغيرة 


ن الثابت غير حساس لحالة الأحرف نستخدم الصيغة التالية: 


«(Case-Insensitive)‏ وإذا ردت أ“ 


Define (‘Constant Name', Value, true); 
ومن الضروري التأكيد على الآتي:‎ 
يكتب وفق الصيغة التالية:‎ ۴٣١۴ كود‎ (۱) 
<?php 


كود 45م المراد تنفيذه 
0 


)١(‏ الكود مط م?> يعلن أن الكود التالي عبارة عن 5611804 بلغة 68148 سيتم تنفيذه على جهاز 
الخادم من خلال .Apache Server‏ 
(9) كود الطباعة على شاشة المستعرض في لغة 8115 هو: 
Echo ("‏ 
المحتوى المراد طباعته على شاشة المستعرض أو أي كود بلغة 17M‏ 


7 


.":"5©101 ©0101 كل جملة في لغة 8115 لابد أن تنتهي بفاصلة منقوطة‎ )٤( 

(5) كتابة تعليق داخل كود 7115 دون أن يترجم أو ينفذ يسبق بعلامة "//" . 

(1) أما لكتابة ملاحظة أو نص أكثر من سطر فيتم كتابة التعليق أو الملاحظات بالكامل مسبوقة بعلامة 
"*/" وفي نهاية الملاحظة نضع العلامة "/*". 


@ التعامل مع قاعدة البيانات :dbdictionary‏ 


بعد إنشاء قاعدة البيانات ٣2¥‏ ٥اط‏ التي تحتوي على مصطلحات الكمبيوتر في جدول 2161175 
سوف نتعامل مع سجلات جدول البيانات من خلال صفحات موقع 'قاموس مصطلحات المصور" حيث 
يمكننا من خلال صفحاته المختلفة إضافة مصطلح إلى قاعدة البيانات أو البحث عن مصطاح أو تعديل 
أي بيان فيه أو حذف مصطلح. وجميع هذه العمليات بداية تحتاج إلى إنشاء وفتح اتصال بين قاعدة 
البيانات وصفحات الموقع» وذلك قبل إجراء أي من هذه المعاملات» ومن هنا سوف نبدأ في إنشاء صفحة 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


4 


تحتوي على كود 8148 يحقق الاتصال بقاعدة البيانات بحيث يتم استدعاؤها في بداية كل صفحة ويب تقوم 
بإحدى عمليات التحديث فى قاعدة البيانات. 
Site View connection.php” xX‏ 
<?php‏ 1 


Ş$username="root"; 


$password="'"; 


$database="dbdictionary"; 


60 ديا هل ها 606 ل‎ ١ 


$server="localhost"; 


$connect=mysql connect("$server", "$username", "$password"); 
if ($Sconnect) 


{ 
$select=mysql select db("$database") or ;("هناك مشكلة فى قاعدة البيانات")عفل‎ 
else 


1 
:("لم يتم الاتصال بقاعدة البيانات")120ع© 


شكل (۲۲) كود صفحة الاتصال بقاعدة البيانات 
بدراسة الكود السابق» نلاحظ ما يلي: 
€ بداية الكود <?php‏ 
> هناك أريع متطلبات أساسية للاتصال بقاعدة البيانات هي: 


اسم جهاز الخادم - اسم المستخدم - كلمة المرور - اسم قاعدة البيانات. 


لاحظ (اسم المستخدم - كلمة المرور ( 
الشرح الكود 
اسم مستخدم ا8۵ یخصص للمتغير 111231116 ©51005. $username="root’;‏ ا 


كلمة المرور الافتراضية تخصص للمتغير 502355110170 ويجب 


$password=""; 1‏ 
تغييرها كما سندرس في الوحدة الخامسة. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


- لاحظ (اسم قاعدة البيانات) 


الشرح الكود 
اسم قاعدة البيانات يخصص للمتغير 
$database=-"dbdictionary';‏ 
.$database‏ 
- لاحظ (اسم جهاز الخادم) 
الشرح الكود 
اسم الخادم "1063110051" الئضيف لقا عدة البيانات 
۴ 1 " 
$server="localhost';‏ 
يخصص للمتغير $56۲۷۵۲. 


$connect=mysql_connect("$server',"'$username'",'$password"); 


> تنفيذ دال con "٤٤‏ 0/501 والتے, تحتاح | 


(اسم جهاز الخادم المضيف - واسم المستخدم - كلمة المرور). 


إلى المتغير 56017116©614» حيث يكون ناتج الدالة "©1711" إذا تم التحقق من صحة المعطيات 
الثلاثة السابقة» أو "3156" إذا كانت غير ذلك» وللتأكد من ذلك نستخدم جملة ۴| التالية: 
(أع50000) if‏ 


{ 
$select=mysql_select_db("$database") or die 

:"هناك مشكلة في قاعدة البيانات') 

} 

else 

{ 
:('لم يتم الاتصال بقاعدة البیانات') ٤٥۸٥‏ 

} 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


الشرط يسأل عن قيمة المتغير 5601716©14, فإذا كانت "©7500" فإنه يتم الاتصال بقاعدة 
البيانات المسماة 503430356 من خلال الدالة اك_ءمامء_اهورص أو عرض رسالة حال وجود مشكلةء 
من خلال الكود التالى: 
:"هناك مشكلة في قاعدة البيانات') 016 01 


وإذا كانت قيمة المتغير ٣٠٥١‏ ١٠ء$»‏ "3156" يعرض الرسالة التي تلي ها٠‏ على صفحة الويب 
بأنه 'لم يتم الاتصال بقاعدة البيانات". 


> نهاية الكود <9 


نشاط (۸) 


"إنشاء صفحة الاتصال بقواعد البيانات محام. 06رمع" 


بكتاب الأنشطة والتدريبات 6 Î‏ ف لع , 
صفحة ( ٠١‏ ) ل Tas‏ 


زر تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 6 ۷۲ 


5 الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


١ 
ل‎ 
05 
9 
2 
1 


الموضوع الثاني 
المعاملات وال مل الشرطية في لغة 


PHP 


نوات التعلم 

في نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن: 
-١‏ يميز بين المعاملات هاج مم0 في لغة 4۲ ۴. 
-١‏ يشرح جملة الشرط 00110111101١‏ ]| في لغة 4۲ ۴. 
۳- يتعرف جملة Swi‏ في لغة إلاط. 


4- يوظف الصيغ المختلفة لجملتي الشرط 518/111١‏ & ۴| في حل المشكلات. 
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الوحدة الثالثة 


إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


قبل البدء في إنشاء صفحة إضافة مصطلح يمكن أن نستعرض معًا مفهوم المعاملات 06©136015», 


حيث يوجد ثلاثة أنواع في لغة ۴۴۳١۲‏ وهي: 


:Operators المعاملاات‎ 


)١(‏ معاملات حسابية بنوعيها (العادية - أخرى). 


المعامل 
U‏ الجمع 
1 الطرح 
الضرب 


% باقي القسمة 


يشير إلى عملية 


مثال 
2+3 
6-4 
5*2 
8/2 
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(۲) وهناك معاملات حسابية أخرى خاصة بلغة ۴۳۲ مثل: 


Means 
$x = $x + 5 
$x = 58-5 
$x = $X * 5 
$x = $X 65 
$X = $X % 5 
$x = $x + 1 
$x = $X - 1 


)۳( معاملات مقارنة 


<= 
Less Than 


Or Equal 


>= < 
Greater Than 


Or Equal 


Example 
$x +=5 
$X -=5 
$x *- 5 
$x /= 5 
$x % = 5 
$x++ 


$x- 


ِ- > 
Greater 
Than 
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ناتج المثال 


Operation 


Operator == 


Refer to 


V٤ 6 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


)٤(‏ معاملات منطيقة هم0 10016231 ويرمز اليها كما بالجدول التالى: 


المعنى 


و 


3 
ناتج استخدام المعاملات المنطقية: 


Operator 


مثال 
X Y۷ X|| Y X && Y 1X‏ 
True True True True False‏ 
True False True False False‏ 
False True True False True‏ 
False False False False True‏ 
جملة الشرط IF Condition‏ 


جملة الشرط ۴|ء والتي يمكن لمطوري البرامج من خلالها وضع شرط معين واختباره فإذا كان ناتج الشرط 
صحيحًا يقوم البرنامج بتنفيذ كود معينء وإذا كانت نتيجة تنفيذ الشرط غير صحيحة قام بتنفيذ كود آخر. 
ويمكن استخدام جملة ۴| بصور متعددة حسب متطلبات البرنامج» ولعل أبسط صورة 
تستخدم فيها جملة ۴| في لغة P١۲‏ هي: 
If (Logical Condition)‏ 


{ 
الكود المراد تنفيذه إذا كان ناتج الشرط صحيحًا 


Logical Condition: 
تشير إلى تعبير شرطي مثل:‎ 
...إلخ.‎ Name == "Administrator" yÎ Age < 6 أو‎ Degree > 50 


فكما يتضح من الأمثلة السابقة ومما سبق لك دراسته»ء يلاحظ أن: 


الشرط يقارن بين متغيرين أو متغير وثابت بينهما إحدى معاملات المقارنة السابق الإشارة إليهاء 
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الوحدة الثالثة 


وفي هذه الحالة إذا تحقق الشرط يتم فقط تنفيذ الكود بين القوسين  (‏ ). 


نلاحظ في المثال السابق: أن: 
- عبارة 'أنت الأول": 


<?PHP 
$A="First'; 
If ($A=="First') 
{ 


E c۸٥ :"أنت الأول"‎ 


2< 


ستطبع على شاشة المستعرض إذا كانت قيمة المتغير $۸ تساوي '2154". 


علامة س" ف 


)$A = First; -‏ تمثل: 
معامل تخصيص» أما علامة '--" مع جملة ۴| 
- كل جملة فى لغة 5115 تنتهى: 
بفاصلة منقوطة ا ١‏ 


والصورة التالية لجملة ۴| هي الأكثر شيوعًا 
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تمثل معامل منطقي (|2ن0ا). 


If (Logical Condition) 
{ 


الكود المراد تنفيذه إذا تحقق الشرط ©1101 


Else 


الكود المراد تنفيذه إذا لم يتحقق الشرط 


إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


۷٦ م‎ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


ِذَا فالطبيعي أن أي شرط قد تكون نتيجته "71006" فيتم تنفيذ الكود الخاص بتحقق الشرط 
فقط بعد ۴| مباشرةء وقد يكون نتيجة الشرط "53156" فيتم تنفيذ الكود التالي ل 2156 فقط. 


مثال: 
<?PHP‏ 
:"95-5600 
If ($A=='"First')‏ 
{ 
"أنت الأول" ٤۸٥‏ 
} 
Else‏ 
{ 
"أنث الثاني' ٤-۸٥‏ 
} 
<2 


في المثال السابق نلاحظ أن: 
- عبارة 'أنت الأول": 
ستطبع فقط على صفحة مستعرض الإنترنت إذا كانت فقط قيمة المتغير $۸ تساوي '٤۲5أ۴"‏ والا 
سيتم طباعة عبارة "أنت الثاني" ونظرًا لأن "5660170" -88 فإن الشرط لم يتحقق» بالتالي يكون ناتج 
تنفيذ الكود بالكامل طباعة عبارة "أنت الثاني". 
- علامة "-" فى الكود (:'"51"-58): 
تمثل معامل تخصيصء أما علامة "==" مع جملة ۴ا تمثل معامل منطقي. 
- كود ۴| بالكامل يعتبر حملة واحدة. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


الصورة التالية أكثر تعقيدًا لجملة ۴| (215611] - 11): 


If (Logical Condition) 
{ 
الكود المراد تنفيذه إذا تحقق الشرط الأول‎ 
} 
Elseif (Logical Condition) 
{ 
الكود المراد تنفيذه إذا تحقق الشرط الثاني‎ 
} 
Else 
{ 
الكود المراد تنفيذه إذا لم يتحقق الشرط الثاني‎ 
} 


نلاحظ أن 
جملة ۴| الأولى يليها شرط إذا تحقق يتم تنفيذ الكود التالي لها مباشرةً وإذا لم يتحقق فهناك شرط ثان 
إذا تحقق ينفذ الكود الذي يلي 115©17, واذا لم يتحقق ينفذ الكود الذي يلي ©1515؛ وبدءً من 1215617 حتى 


نهاية الكود عبارة عن جواب عدم تحقق الشرط لجملة ۴| الأولى. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


مثال: 
<?PHP‏ 
$X=5;‏ 
If ($X<0)‏ 
{ 
'الرقم سالب" 010 
} 
Elseif ($X>0)‏ 
{ 
'الرقم موجب" ٤۸٥‏ 
} 
Else‏ 
{ 
'الرقم يساوي صفر" ٤٥۸٥‏ 
} 
و 


نظرًا لأن 50-5 فقد تحقق الشرط الثاني بعد 7أ©1215 وسيتم طباعة عبارة 'الرقم موجب" 


وهناك صيغة أخرى لجملة ۴| 
(Expression) ? If-True : If-False;‏ 
والمثال التالي يوضح استخدام الصيغة السابقة والتي يطلق عليها ۴ا ۵اا ٣ا:‏ 
<?PHP‏ 
المتغير يساوي $x = 1; // ١‏ 
$y = ($x = = 1) 7 'One' : 'Two';‏ 
يتم اختبار قيمة المتغير ×$ إذا كانت قيمته تساوي ١ء‏ يحفظ القيمة "0"6" 
في المتغير $y‏ وإلا يحفظ القيمة "11/0" في المتغير .$y‏ 
طباعة قيمة المتغير // Print $y‏ 
>2 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


نلاحظ في المثال السابق أن (:) ١٥ا٥٥‏ ساعدت على كتابة أكثر من جمله في سطر واحد أدت إلى 
نفس النتيجة بدلا من استخدام الأقواس ( ). 
ثاما: جملة Switch‏ 


ويمكن أيضًَا استخدام جملة (511/1661 كأحد العبارات الشرطية في لغة 51458, حيث يمكن من خلالها اختبار 


عدة شروط وفي كل مرة يتحقق فيها شرط ما ينفذ كود معين» والمثال التالي يوضح ذلك: 


92-1 
switch ) $x ( 
1 


default: 
echo " 
break: 


شكل (۲۳) كود 5115 يوضح استخدام الجملة الشرطية ١1ع16للا5‏ 
وبتحليل الكود السابق نجد أن: 
« المتغير ×$ بدأ بالقيمة ١ء‏ ثم استخدمت جملة 511/1161 لاختبار قيمة المتغير ×$ حيث يوجد أكثر من 
احتمال: 
ه فإذا كانت قيمة المتغير تساوي 1 أي ":1 6356" يطبع 'واحد'؛ وهكذا لباقي الاحتمالات وفي آخر 


احتمال إذا لم تكن قيمة المتغير لا تساوي ١‏ أو ۲ أو ” أي دون ذلك يطبع "لا يوجد'. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


ه وهناك أمر آخر يمكن الخروج به دون تنفيذ شيء هو أمر »5×٤‏ فمثّلاا يمكن في آخر حالة 
efu‏ نضع كلمة ٤×٤‏ للخروج من جملة 51/1661 بدلا من طباعة "لا يوجد". 


هناك صيغة أخرى لجملة 51/11661١‏ حيث يمكن أن تأخذ ©6356 أكثر من قيمة واحدة كما بالمثال التالى: 


<?php 


$a =2; 
Switch ( $a ) 


طباعة في حالة هخ 


case 1:‏ 
يساوى ۱ او ۲ او ۲ 


case 2: 
case 3: 


:'واحد أو اثنين أو ثلاث ' مراعه 
break;‏ 


ا default:‏ 
;'ارقام اخری' آعم 
شكل )١4(‏ كود 5115 يوضح صيغة أخرى لاستخدام الجملة الشرطية $۷1 
وهذه الصورة تكافئ جملة أ التالية: 
If ($a==1 || $a==2 || $a==3 (‏ 
هذا المعامل || يعنى 0۴ { 


:'واحد أو اثنين أو ثلاث“ ٤٤۸٥‏ 
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و ب rE‏ 


الوحدة الثالثه 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


الموضوع الثالث 


صفحة إدخال مصطلح 


Add _Term.php 


وات التعلم 

في نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن: 
١‏ يصمم واجهة صفحة إدخال مصطلح. 
"- يكتب كود ۴۳1۲ لتضمين صفحتي .Header & Connection‏ 
۳- ينشئ صفحة إدخال مصطلح. 


؛- يتحقق من إضافة مصطلح إلى قاعدة البيانات. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 
5 2 
)١(‏ تصميم واحمة صفحة إدخال مصطاح 
من خلال أحد التطبيقات المستخدمة في إنشاء صفحات الوبب (مثل (Expression Web‏ 
كك إشاء نتكة إذخال مصطلح ات التصميم الثالى:.وحففلها على مجك الفوقع على جارك 


اکا اجا 


Microsoft Expression Web 4‏ - )xampp\htdocs\Dictionary\Add_Term.phpا:)‏ ادخال مصطلح للقاموس 


Window Help 


Panels 
ذخ اي كر - 2 5 - م‎ 5 5 © 6 © 5 88 8 - 
inna J_I ~r د م‎ 


File Edit View Insert Format Tools Table Site Data View 


xX EH ¢ 


mum - e “ a El 
1 BF 


Right-to-left ل‎ 
# x 


H.-F - M- إلى‎ 


LIL 
vw HTML 
+ Tags 


88 <div> 


Site View Add_Term.php* x 


<body>| <form> 


Tag Properties 


اذا الهش E‏ 


ı <span> 
= Break 
ES Horizontal Line 
FF Image 
# Inline Frame 
8 Layer 
Paragraph 


¥ Form Controls 
EF Advanced Button 
f Drop-Down Box 
Form 
Group Box 
[ab Bt] 
Input (Checkbox) 
a Input (File) 
Input (Hidden) 
F" Input (Image) 
EE Input (Password) 
© Ba GE | 
ZR) 
eû Input (Submit) 
IU] 
Label 
8 كنتلا‎ 


| BR” B- re ا 2 ال‎ 


Browse 


e SLE. 


add_term.php 
multipart/form-data 
post 


شكل )١5(‏ شاشة تصميم صفحة Add_Term.php‏ 


Des‏ يدون كتاية أ 


Attributes‏ د 

pfi action 

f" enctype 

fi method 

f acceptchar... 
f accesskey 
EF’ atomicsele... 

f autocomplete 

f dass 

pë contentedi... 
f dir 

fi enableview... 

fî hidefocus 
id 

f lang 

f language 

name‏ الوم 

EF runat 

f style 

f tabindex 

EF target 

EF title 

fî unselectable 
i visible 

-| Events 

Z onactivate 
Z onbeforea... 
Z onbeforec... 
i achafocacut 


Drag margin handles to resize margins. Press SHIFT or CTRL for more options 


ف كتابة حنواق اة الإنحاك محال مط وف ك رضح هذا :العنواق فى مقط مسقل 
<۷> بإدراج مقطع من صندوق الأدوات “700150 كما بالشكل 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


Toolbox 
v HTML 
- 1305 


Ê <a> 


gı Defines a 


laj document 


# Inline Frame 


٠‏ وتستطيع عزيزي الطالب كتابة النصوص كما بالشاشة السابقة واستخدام صندوق الأدوات "750015017" أعلى 


« ادراج النموذج 150117 من نافذة الأدوات كما بالشكل التالي: 
v Form Controls‏ 
ET! Advanced Button‏ 
Drop-Down Box‏ يع 


Form 


Group Box 


input fields. Requires 
code on the Web server 
i to process the input. 


9 Input (Image) 


٠‏ يستخدم النموذج 0177 لتمرير أو إرسال كافة بيانات النموذج الموجودة في عناصر التحكم من مستعرض 
الويب إلى الخادم S۷۴٣‏ اعلالا وبوجد طريقتين لإرسال بيانات النموذج وهما: 


<form method=-"GET'> =‏ 1 5م80 و13[ 
؟- <form method='"POST'>‏ 1 


<form> 
ذا‎ Attributes 
ألم‎ action |add_term.php 
rfi enctype multipart/form-data . 5 5 1 
Form للنموذج>‎ N٤٣٥4 حيث يمكن ضبط الخاصية‎ 
الم‎ acceptcharset 


بالقيمة 5057 أو القيمة 6157 كما بالشكل. E‏ 0 


atomicselection‏ الام 


شكل (١١؟)‏ ضبط خصائص النموذج ۴٥۲٣۳‏ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


بعض الفروق الهامة بين القيمة (1 005) والقيمة (1 1 06): 


GET POST 
" لا تظهر البيانات المرسلة في ' الا ' | تظهر البيانات المرسلة في ' ا۸ل‎ 
عنوان الصفحة. عنوان الصفحة.‎ 
يتم استخدامها في إرسال كلمات سر أو | لا يتم استخدامها في إرسال كلمات سر أو‎ 
أي بيانات هامة. أي بيانات هامة.‎ 
الحد الاقصى لها للبيانات المستخدمة | لها حد اقصى للبيانات المستخدمة تصل‎ 
.Character تصل إلى ط× 8 إلى ۷1۰۷ حرف‎ 


ملاحظة: 
سوف يتم التعرف على استخدامهما بالفصل الدراسي الثاني 


وإذا نظرت إلى كود ٤۳٣١‏ ستجد بداية ال 739 الخاص بالنموذج 0170 كالآتي: 


>101111)111100-" ")05م‎ action="add_term.php" enctype="multipart/form-data'"> 


من الصيغة السابقة نجد العديد من خصائص النموذج 10117 حيث: 


- الخاصية 18/641790 يوجد لها معاملان إما المعامل 6157 أو المعامل 2057 . 

- الخاصية 8611017 ومعاملها اسم الصفحة التي يتم الانتقال إليها عند الضغط على زر أ" طں؟. 
بعض النصوص المُعبرة عن القيم المطلوب إدخالها في مربعات النصوص» مثل: 

نص 'المصطلح" ويليه مربع نص لإدخال اسم المصطلح وهكذا باقي بيانات المصطلح» والصيغة التالية 

توضح كيفية إنشاء مربع نص على نافذة مستعرض الإنترنت: 


<input name = '"text_term' type = "text" style = "width : 482pX'> 


من الصيغة السابقة لاحظ الآتي: 
|٣٤ 0‏ تعني إدراج عنصر تحكم. 
name = "text_term" o‏ تعنى text_term anıl‏ . 
"eX 0‏ = 1/06 تعنى نوعه مریع نص. 
هك "كام482 : "width‏ = مالtء‏ تعنى ضبط خاصية العرض لمريع النص. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


٠‏ زر 'إضافة" المسئول عن تنفيذ الكود الخاص بإدراج بيانات المصطلح الجديد في سجل بيانات في 
قاعدة البيانات ."dbdictionary'‏ 
٠‏ تم وضع باقي مكونات الصفحة في قسم آخر <۷أل>. 


وللاطلاع على كود ا1۳۷ المقابل لصفحة إدخال مصطلح الموضحة بالشاشة السابقة قم بتحديد 


النموذج ۴0۳۳ء ثم اضغط زر "60068" أسفل نافذة البرنامج فيظهر الكود الخاص بهذا القسم محددًا كما 


بالشاشة التالية: 
<html dir="rtl">‏ 1 
<head>‏ 2 
<meta content="tex/html; charset=utf-8" http-equiv="Content-Type">‏ 3 
<ه[ان/>ادخال مصطلح للقاموس<6]]> ١‏ 4 
<630/> { 


1( 
أضف كود 42م 


<body dir="rtl"> 


8 <div style="text-align:cente" > > مصطح<1‎ JIs!</1,1></ div> 
9 <form method="post" action="add term.php" enctype="multiparlform-data"> 
10 <div class="style2"> 
11 >. < المصطلع‎ nbsp; nbsp; زوط تمع‎ nbsp, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
12 <input name="txt term" type="text" style="width: 482px" > <br > 
13 <r < ترجمئة‎ nbsp; nbsp, nbsp nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
14 <input name="trans" type="text" style="width: 482px" > <br > 
15 >: < :ونع وصف المصطلح‎ nbsp: nbsp: nbsp, nbsp; nbsp; &nbsp;&nbsp;&nbsp; 
16 <textarea name="TextArea1" style="width: 480px; height: 30px"></textarea> <br/> 
17 <br> :مور الصورة‎ &nbsp;&nbsp;&nbsp:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
18 <input nane="File1" style="width: 488px" type="file"> <hr> <hr 
19 <input name="Submit1" style="width: 76px" type="submit" value=" ><br> <br > 
2 <div> 


<Horm> 


)"( 
أضف كود P۴٣۴‏ 


<body> 


شكل (۲۷) كود HTML‏ لصفحة Add_term.php‏ 
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انتبه إلى الكود التالي: 


9 <form method="post" action="add term.php" enctype="multipart/form-data"™ 


والذي يضم المعطيات الثلاثة التالية: 


' action="add term.php" 


enctype="multipart'form-data'"™ 


تذكر عزيزي الطالب: 


يمكنك استخدام لغة الترميز 111/1! في إنشاء صفحة "إدخال مصطلح" ©8001_16117.0115 مباشرة. 


الوحدة الثالثة 


إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


وهو أسلوب نقل البيانات من النموذج إلى الخادم 
.Server‏ 

تحديد اسم الصفحة المراد الانتقال إليها 
(مhم.add_term‏ ) عند الضغط على زر ٤/٣bںu؟.‏ 
تستخدم عندما يتم استخدام النموذج في رفع (الصور) 
على الخادم 56۲۷۴۲ وإذا لم يستخدم لا يتم رفع الصور 
داخل مجلد الصور "216". 


كما يمكنك تنفيذ التصميم التالي لصفحة إدخال مصطلح للكود المختصر التالي ذكره: 


اعا کاک )| اذا 


© 85 | : 


المصطدح open source programs‏ 
ترجمتة البرامج مفتوحة المصدر 
برامج وتطبيقات منشورة يُسمح لمستخدميها بالاطلاع على الكود وامكانية تعديله وتطويره في ضوء 2 
وصف المصطلح احتداحات مطه ب دماء . اعادة نتر ها استخدامها ند التعد 
الصورة opensource.jpg | Choose File‏ 


× ادخال مصطلح للقاموس 


< 3 G | © localhost/terms/add_term.php 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


(۲) كتابة كود 2115: 
عند تحميل صفحة إدخال بيانات مصطلح على مستعرض الإنترنت» وقمت بإدخال بيانات في 
عناصر التحكم على صفحة المستعرض سنجد أن البيانات غير مرتبطة بقاعدة البيانات» لذا نحتاج إلى: 
٠‏ إظهار الصورة 83171167 وعناوين صفحات الموقع في بداية الشاشة وذلك من خلال إضافة كود ۴۴۳۲۴ 
الخاص بإدراج صفحة 1646١‏ في المكان المشار إليه بالرقم )١(‏ على الشاشة السابقة بالكود التالي: 
<?php‏ 


include("header.php'""); 
کي‎ 


شكل (۲۸) كود 5115 لتضمين صفحة Header‏ 

٠‏ تضمين صفحة الاتصال بقاعدة البيانات. 

٠‏ كتابة كود ۴۳۴ المسؤل عن تخصيص البيانات التي سيتم إدخالها في عناصر التحكم على صفحة 
مستعرض الإنترنت في متغيرات» ثم إدراج محتوى هذه المتغيرات في حقول سجل بيانات مصطلح جديد 
في جدول قاعدة البيانات وفيما يلي سوف نتناول بالشرح التفصيلي كود 8118 مختصر وآخر أكثر دقة 
واحترافية مع توضيح نواحي القصور في الكود المختصر. 
() کرد 2818 الختصر: 


الغرض النهائي من كود ۴١۴‏ التالي إضافة مصطلح جديد كسجل 166070 في ملف قاعدة البيانات من خلال 
صفحة إدخال مصطلح التي سبق تصميمها وإنشائها على مستعرض الإنترنت» والكود المختصر التالي يحقق الغرض: 
<?php‏ 
Incloude("header.php");‏ 
include("connection.php");‏ 
if(isset($_POST['Submit1']))‏ 
$term=$_POST['txt_term'];‏ { 
$trans=$_POST['trans'];‏ 
$defe=$_POST['TextArea1'];‏ 
تخزين اسم ملف الصورة في المتغير 56118 @S$file=$_FILES['File1"']['name'];‏ 
تخزين الصورة داخل المتغير 96800 @$tmp=$_FILES[File1']['tmp_name'];‏ 
ادالة المستخدمة في رفع الملف وتحتاج إلى معاملين الأول الصورة الثاني اسم ملف الصورة Move_uploaded_File($tmp,'PÎC/".$İI®); ia,‏ 
تخزين اسم ملف الصورة ومساره في nllتغير $picture="pic/" . $file .''; ْ$picture‏ 
mysql_query ("SET NAMES 'utf8");‏ 


mysql_query('insert into terms values (",'$term','$trans','$defe','$picture')'); } ?< 
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الوحدة الثالثة 


ونلاحظ في الكود المختصر السابق ما يلي: 
ه تضمين صفحة .header.php‏ 


٠ه‏ تضمين صفحة الاتصال بقاعدة البيانات .connection.php‏ 


إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


Cااء) التحقق من الضغط على زر 510817111 حيث يتم اختبار إن كان المستخدم قد قام بالضغط‎ ٠ 


على زر 'إضافة" فيتم تنفيذ الآتي: 


ه تخصيص أو تخزين البيانات التي تم إدخالها في مربعات النصوص الخاصة بالمصطلح 
الجديد على صفحة الويب في المتغيرات التالية بالترتيب: 
«($term - 5305 - 50616 - $picture)‏ مع ملاحظة أن المتغير 5_5057 
يخزن به قيم عناصر التحكم على النموذج ۴١١۳۳‏ عند الضغط على زر 251051214 


كما يتضح بالكود التالي: 
$term=$_POST['txt_term'];‏ 
Ş$trans=$_POST['trans'];‏ 
$defe=$_POST['TextArea1'];‏ 
@$file=$_FILES[File1']['name'];‏ 
@$tmp=$_FILES['File1']['tmp_name'];‏ 
Move_uploaded_File($tmp,'pic/'.$file);‏ 
$picture="pic/" . $file . " ';‏ 


O O O O 


O 


٥ه‏ تأكد من إنشاء مجلد باسم "16م" في المسار التالي: c:\lxampp\htdocs\terms‏ 
ولرفع ملف الصور على 5٥۲۷۴١‏ يخصص اسم الملف المختار من المستخدم 11©1! 
إلى المتغير ©85111, مع ملاحظة أن العلامة © تسمى 0117167 وتتعامل معها لغة 
۴ على أنها متغيرء ويفيد ذلك في عدم إظهار رسالة خطأ إذا كانت قيمته فارغة. 
© والغرض من الكود: :("158ن' NAMES‏ 5251 ")لازعنان_اودلام: استخدام دالة 
yاue_اهءلص‏ في إظهار البيانات على صفحة الويب باللغة العريية بشكل صحيح 


ه. والغرض من جملة الكود الأخيرة بجميع مكوناتها والمشار إلي كل منها: 


$qugry=mysql_query("insert into terms values (",'$term','$trans','$defe','$picture')"); 


الجدول مااج1 دالة Function‏ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


إنشاء متغير /[50101©1 بحيث يخصص له قيمة تنفيذ الدالة 6٣¥‏ ا۷54|_Q"‏ التي تحتوي على جملة 
4 الخاصة بلغة ا©5. والتي تقوم بإدخال البيانات التي تم تخزينها في المتغيرات إلى الحقول 
المناظرة لها في جدول قاعدة البيانات "6©11115". 


عند تنفيذ الكود السابق بالفعل سيتم إضافة سجل بيانات مصطلح جديد في جدول "16۲۳58" في 
قاعدة البيانات» إلا أنه قد نجد بعض نواحي القصور في الكود المختصر يتم تغطيتها في الكود (ب) 
بشكل أكثر احترافية» ومن أوجه القصور في الكود المختصر: 

)١(‏ إضافة صورة المصطلح يتطلب -كمسألة تنظيمية- إلى إنشاء مجلد يحتوي على الصور 
الخاصة بجميع المصطلحات التي تم إدخالها في جدول قاعدة البيانات» وبالتالي يفضل إضافة 
كود ۴۳۶ يختبر وجود هذا المجلد فإذا وجد يتم نسخ ملف الصورة الدال على المصطلح به 
وان لم يوجد المجلد يتم إنشاء مجلد الصور ووضع ملف الصورة فيه ولك فقط إذا لم يتم إدخال 
اسم ملف الصورة في عنصر التحكم الخاص بالصورة على صفحة مستعرض الإنترنت. 


(۲) إذا قام المستخدم بالضغط على زر "إضافة" ولم يدخل أي بيان للمصطلح الجديد أو ترك بعض 
البيانات خالية سيتم إدراج سجل خالي من البيانات في جدول "68/575" في قاعدة البيانات» لذا 
ينبغي التحقق من أن المستخدم قد قام بإدخال كافة بيانات المصطلح قبل إدراجه كسجل في 
جدول قاعدة البيانات "61175]". 


(*) ونلاحظ إِيضًا أن الكود المختصر لا يظهر أي رد فعل بعد الضغط على زر "اضافة". وبالتالي 
فإن المستخدم لا يعرف إذا كان إضافة سجل بيانات مصطلح جديد قد تم بنجاح أم لاء لذا يجب 
التحقق من ذلك واظهار رسالة توضح إن كان اضافة السجل تم بنجاح أم لا. 


(ب) كود 8818 الأكثر دقة: 


عند هذا الحد نستطيع إدخال بيانات مصطلح في عناصر التحكم على صفحة المستعرض ولكنها بيانات 
غير مرتبطة بقاعدة البيانات» لذا نحتاج إلى: 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


۴۴۲۴ إظهار الصورة 183191067 وعناوين صفحات الموقع في بداية الشاشة وذلك من خلال إضافة كود‎ ٠ 
على الشاشة السابقة بالكود التالي:‎ )١( الخاص بإدراج صفحة ۳۴400۲ في المكان المشار إليه بالرقم‎ 


<?php 
include("header.php'"); 
> 


شكل (۲۸) كود 5115 لتضمين صفحة Header‏ 
٠‏ تحقيق الاتصال بقاعدة البيانات. 
٠‏ التحقق من إدخال بيانات في عناصر التحكم على صفحة الودب. 
٠‏ تسجيل بيانات المصطلح في جدول قاعدة البيانات وذلك من خلال كود 818 المرتبط بزر 'إضافة" في 
المكان المشار إليه بالرقم (؟) على الشاشة كود ا١۳1۲‏ الخاصة بتصميم صفحة إضافة مصطلح: 


إر تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي م ۹۱ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


<?php 
include("connection. pp"); 
ifisset(S POST['Submit1'])) جدلة شرطية لتیار وجود مجلة‎ 
الا‎ dr(pie)) ) هام وانشاؤه في حالة عدم وجوده أ ) :(نام اله‎ 
QSfile=$_FILES[File1']['name'] ; 
QStmp=$_FILES[File1"]['tmp_name’]; 
iflempty(Sfile)) { move_uploaded file(Stmp,'pic/'.$file); 
Sterm=$ POST['txt term']; 
Strans=$ POST['trans']; جملة شرطية لاختبار هل تم اختيار ملف صورة‎ 
$defe=$ POST['TextAreal']; 
Spicture="pic/" , $file .""; 
if ) Sterm !== "" && trans !== "" && Sdefe !=="" && !empty(file) ) 


( 
mysql_query( "SET NAMES 'utf"); 
Squery=mysql_query( "insert into terms values(','Stemr', Strans', defe, Spicture)'), 
۰ 
"ثم اضافة البيانات بنجاح"-9031265‎ 
echo("<label id= Label1' style='color: #FF0000;font-size: x-large;'> $datares </label> "); 
ا‎ 
else 
"لم بئم اضافة الببانات"=يع :4ال‎ 
echo("<label id=" Label1' style='color: #FF0000;font-size: x-large; $datares label "); 
1 


else 


' البياناث الثى ثم إدخالها غير صحبحة يجب إدخال جميع الحفول"-65:ة1031 
echo("<label id= Label1' style='color: #FF0O000;font-size: x-large; $datares </labe ");‏ 


شكل (۲۹) كود 5115 لإضافة مصطلح جديد 
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( تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


عزيزى الطالب تعرف الشرح التفصيلي للكود كالتالي: 


<?php 
تضمين صفحة تحقيق الاتصال بقاعدة البيانات بالكود التالي:‎ - 
include('connection.php"); 
Sub ٣٤ التحقق من الضغط على زر‎ 
الكود التالي يختبر إن كان المستخدم قد قام بالضغط 1112© على زر 'إضافة" فيتم التحقق‎ - 
ولا من وجود مجلد باسم "آم" وهو المخصص لوضع الصور الخاصة بالمصطلحات‎ 
بداخله. فإذا لم يُنشأ هذا المجلد يتم إنشاؤه.‎ 
if (isset($_POST["'Submit1'])) 
{ 


if (!is_dir('pic")) { mkdir('pic'); }‏ 
- وينفس الطريقة يمكن إنشاء مجلدات أخرى للصور أو الفيديو سواء بالكود أو من خلال نظام 
التشغيل في مجلد المشروع. 
رفع ملف الصور على 561761 


- يخصص اسم الملف المختار من المستخدم 1١ا۴‏ إلى المتغير ©5111» مع ملاحظة أن العلامة 
© تسمى 20117661 وتتعامل معها لغة 51458 على أنها متغيرء ويفيد ذلك في عدم إظهار 
رسالة خطأ إذا كانت قيمته فارغة. 


@Ş§file=$_FILES['File1'] ["name']; 
@$tmp=$_FILES['File 1'] ['tmp_name']; 
."016' اختبار إن كان اسم ملف الصورة غير محدد يتم تحميل ملف الصورة من مجلد‎ - 


if (!empty($file)) { move_uploaded_file($tmp,'up/".$file); } 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


تخصيص قيم عناصر التحكم في متغيرات. 
- يتم تخزين البيانات التي تم إدخالها في مربعات النصوص للمصطلح الجديد على صفحة الويب في 
المتغيرات التالية بالترتيب «($term - 51305 50616 - $picture)‏ مع ملاحظة أن المتغير 
57 5# يخزن به قيم عناصر التحكم على النموذج ۴٥۲۳‏ عند الضغط على زر 510511716. 
$term=$_POST['txt_term'];‏ 
$trans=$_POST[trans'];‏ 
$defe=$_POST['TextArea1'];‏ 
$picture="pic/" . $file . " ';‏ 
التحقق من إدخال قيم في عناصر التحكم على النموذج ۴0١۲۳١‏ 
- جملة ۴| التالية للتأكد أن هذه المتغيرات ليست خالية أي تم إدخال قيم فيهاء فإذا كان الشرط 
صحيحًا وجميع المتغيرات ليست خالية !انالا يقوم بتنفيذ الآتي: 


- استخدام دالة yا#اه_اهول"‏ يساعد في إظهار البيانات على صفحة الويب باللغة العريية بشكل 


if (Şterm !== " && Ş$trans !== " && $defe !== " && !empty($file) ) 


{ 
mysql_query("'SET NAMES 'utf8"); 


$query=mysql_query("insert into terms values (",'$term','$trans','$defe','$picture')"); 


- تم إنشاء متغير 54116۲۷ بحيث يخصص له قيمة تنفيذ الدالة ل117[/50[!_©[10©1 التي تحتوي على جملة ۸56٤‏ 
الخاصة بلغة ا ©50, والتي تقوم بإدخال البيانات التي تم تخزينها في المتغيرات إلى الحقول المناظرة لها 
في جدول قاعدة البيانات "6611115". 


- ثم يتم التأكد من إدخال البيانات في جدول قاعدة البيانات (/0©8ا18)80 فإذا تم ذلك ظهرت الرسالة 
'تم إضافة البيانات بنجاح والا تظهر الرسالة الم يتم إضافة البيانات". 


۹٤ 6 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


if ($query) 
{ 
;اتم إضافة البيانات بنجاح"-50212:65‎ 
echo("<label id="Label1' style='color: 
#FF0000;font-size: x-large;'> $datares </label> 
1 
} 
else 
;"لم يتم إضافة البيانات'"-502123:65‎ 
echo("<label id="Label1' style='color: 
#FF(0000;font-size: x-large;'> $datares 
</label> 0 


} 

} 

else 

- في حالة عدم إدخال بيانات لجميع الحقول أو بعضها يطبع الرسالة 'البيانات التي تم إدخالها غير 
صحيحة يجب إدخال جميع الحقول'. 


{ 
'البيانات التي تم إدخالها غير صحيحة يجب إدخال جميع الحقول'-5013162165 
echo("<label id='"Label1' style='color:‏ 


#FF0000;font-size: x-large;'> $datares </label> ز("‎ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


نشاط ) 6 
"إنشاء صفحة إدخال مصطلح مطمAdd_term.p"‏ 
عزيزي الطالب/الطالبةء الآن يمكنك استخدام صفحة الويب كواجهة 
للتعامل مع جدول قاعدة البيانات لإضافة مصطلح جديد» وإجراء عمليات 
أخرى. وذلك من خلال تنفيذك نشاط (1) بكتاب الأنشطة والتدريبات , | 


.)١١( صفحة‎ 


(۳) تنفيذ صفحة إدخال مصطلح 9-76 
عند استعراض صفحة إدخال مصطلح على مستعرض الإنترنت تظهر كما يلي» وذلك من خلال العنوان 


localhost/dictionary/add_term.php 


شكل )۳١(‏ نافذة استعراض صفحة إدخال مصطلح 


- في حالة عدم إدخال بيانات والضغط على زر 'إضافة"' يطبع الرسالة 'البيانات التي تم إدخالها غير 
صحيحة يجب إدخال جميع الحقول" أسفل شاشة المستعرض كما يلي: 
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اک = 
[2]ادخال مصطلح للقاعوس x‏ 


erms.php BG | 9 چ‎ 


١( شكل‎ 


- عند إدخال جميع بيانات المصطلح كما يلي: 
أذ 


EEE 


سا 
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localhost/terms/input_term_ 


البيانات التى تم إدخالها غير صحيحة يجب إدخال جميع الحقول 


ج Super Computer‏ 
ترجمتة الكمبيوتر العملاق 
هائل جدا من البيانات و يستخدم على تطاق دولي حيت يمكنه ۸ 
وصف المصطلح رک فة اسا الع كحدوة ذا فلن دان واطع :2 ۷ 
الصورة Browse... C1Users\Public\Pictures\Sample Pictures\isuper_computer.jpg‏ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


— <-- سس 


n ©‏ 9 ا 


ا 


Fm 


AN / 


ليده 


*) نافذة استعراض صفحة إدخال مصطلح غير مكتمل البيانات 


ادخال مصطح للقاموس [29] || © + 2 


lij http://local ıttp://localhost8 080/dictionary/add_term.php 


إدخال مصطلح 


شكل (۳۲) نافذة إدخال مصطلح 


VIF 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


- وبالضغط على زر 'إضافة" تظهر الرسالة 'تم إضافة البيانات بنجاح" أسفل شاشة المستعرض. 
لكك كاك 


انخال مصطنح تنقاموس [5] ||[ © - 2 


تم اضافة البيانات بنجاح 


> 


شكل (۳۳) نافذة التأكد من إدخال مصطلح بشكل صحيح 
في الكود المختصر لا يظهر أي رسائل تفيد إضافة سجل جديد من عدمه في جدول قاعدة البيانات. 


(4) التأكد من إضافة المصطلح إلى قاعدة البيانات 


وللتأكد من أنه تم إضافة البيانات في سجل جديد في قاعدة البيانات» نفتح قاعدة البيانات في 


تبويب جديد لمستعرض الإنترنت بكتابة الرابط التالي "localhost/phpmyadmin'"‏ في شريط العنوان 
ونتأكد من إضافة سجل جديد في جدول '161175": 


STE 


© 4. http://localhost8080/phpmyadmin/tbl_row_action,php#PMAURL-0:tbl_row_acti © + @ || يزيل‎ localhost:8080 /127.0.01 / ... | 
Previous Net | ]2[ Options < | 
f Server 0 ES [BELE Clos iL EIS EN REL LGILLLC 
E] SaL 6 Search Fé Insert [4 Export j=} Import >> More 


x Find: | 
phpMyAdmin 
ها لله جد‎ © 01 © 


Recent Favorites 
iı New 


| Browse 4 Structure 


Showing rows 0 - 0 (1 total, Query took 0.0010 seconds.)‏ عن 


cdcol 
dbdictionary 
gd New SELECT * FROM `terms’ 


l4 terms‏ ن 
j4 users Profiling [ Inline ] [ Edit ] [ Explain SQL ] [ Create PHP Code ] [ Refresh ]‏ # 


information_schema 
Number of rows: | 25 [YW] Filter rows: | Search this table 


mysql 
performance_schema 


+ Options 

E ه | ه‎ > id term 

webauth ° Edit Fé Copy @ Delete 6 Super كمبيوتر ذو إمكاتيات هائلة جدأ يستخدم لتخزد الكمبيو تر‎ pic/super_computer.jpg 
Computer 


phpmyadmin 
picture 


+ Check الى‎ With selected: gF Change @ Delete @ Export 


Number of rows: | 25 [wv] Filter rows Search this table 


Query results operations 


Print view @ Print view (with full texts) [ê Export gj Display chart [¥] Create view‏ وج 


شكل (4") نافذة التأكد من إضافة المصطلح في جدول قاعدة البيانات 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


وللى لقاء 


® 


في 
الفصل الدراسى الثاني 
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